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

LAM-1057 feat: shorten long addresses

packages/admin-ui/src/components/CopyToClipboard.jsx

@@ -13,6 +13,7 @@ const CopyToClipboard = ({
   className,
   buttonClassname,
   children,
+  value,
   wrapperClassname,
   removeSpace = true,
 }) => {
@@ -33,6 +34,12 @@ const CopyToClipboard = ({
   const open = Boolean(anchorEl)
   const id = open ? 'simple-popper' : undefined
 
+  const text = value
+    ? value
+    : removeSpace
+      ? R.replace(/\s/g, '')(children)
+      : children
+
   return (
     <div className={classnames('flex items-center', wrapperClassname)}>
       {children && (
@@ -43,8 +50,7 @@ const CopyToClipboard = ({
             {children}
           </Mono>
           <div className={buttonClassname}>
-            <ReactCopyToClipboard
+            <ReactCopyToClipboard text={text}>
-              text={removeSpace ? R.replace(/\s/g, '')(children) : children}>
               <button
                 className="border-0 bg-transparent cursor-pointer"
                 aria-describedby={id}

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}>
+                      key={selected.cryptoCode}
-                      {formatAddress(
+                      value={address}>
-                        selected.cryptoCode,
+                      {addressDisplay}
-                        selected.fundingAddress,
-                      )}
                     </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>
+            <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,26 @@
 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) => {
+  if (!cryptoCode || !address) return { address: null, addressDisplay: null }
+
+  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 +52,7 @@ const singularOrPlural = (amount, singularStr, pluralStr) =>
 export {
   startCase,
   onlyFirstToUpper,
+  formatAddress,
   formatLong,
   singularOrPlural,
   sentenceCase,