Tune links and hashes

.changelog/1290.trivial.md

@@ -0,0 +1 @@
+Update how links and hashes are displayed on mobile

src/app/components/Account/AccountLink.tsx

@@ -1,40 +1,108 @@
-import { FC } from 'react'
+import { FC, ReactNode } from 'react'
 import { Link as RouterLink } from 'react-router-dom'
 import { useScreenSize } from '../../hooks/useScreensize'
 import Link from '@mui/material/Link'
-import { TrimLinkLabel } from '../TrimLinkLabel'
 import { RouteUtils } from '../../utils/route-utils'
+import InfoIcon from '@mui/icons-material/Info'
 import Typography from '@mui/material/Typography'
 import { COLORS } from '../../../styles/theme/colors'
 import { SearchScope } from '../../../types/searchScope'
+import { trimLongString } from '../../utils/trimLongString'
+import { MaybeWithTooltip } from '../AdaptiveTrimmer/MaybeWithTooltip'
+import { AdaptiveTrimmer } from '../AdaptiveTrimmer/AdaptiveTrimmer'
 
-export const AccountLink: FC<{
-  scope: SearchScope
-  address: string
-  alwaysTrim?: boolean
+const WithTypographyAndLink: FC<{
+  to: string
   plain?: boolean
-}> = ({ scope, address, alwaysTrim, plain }) => {
-  const { isTablet } = useScreenSize()
-  const to = RouteUtils.getAccountRoute(scope, address)
+  mobile?: boolean
+  children: ReactNode
+}> = ({ children, to, plain, mobile }) => {
   return (
     <Typography
       variant="mono"
       component="span"
-      sx={
-        plain
+      sx={{
+        ...(mobile
+          ? {
+              maxWidth: '100%',
+              overflowX: 'hidden',
+            }
+          : {}),
+        ...(plain
           ? { color: COLORS.grayExtraDark, fontWeight: 400 }
-          : { color: COLORS.brandDark, fontWeight: 700 }
-      }
+          : { color: COLORS.brandDark, fontWeight: 700 }),
+      }}
     >
-      {alwaysTrim || isTablet ? (
-        <TrimLinkLabel label={address} to={to} />
-      ) : plain ? (
-        address
+      {plain ? (
+        children
       ) : (
         <Link component={RouterLink} to={to}>
-          {address}
+          {children}
         </Link>
       )}
     </Typography>
   )
 }
+
+export const AccountLink: FC<{
+  scope: SearchScope
+  address: string
+
+  /**
+   * Should we always trim the text to a short line?
+   */
+  alwaysTrim?: boolean
+
+  /**
+   * Plain mode? (No link required)
+   */
+  plain?: boolean
+
+  /**
+   * Any extra tooltips to display
+   *
+   * (Besides the content necessary because of potential shortening)
+   */
+  extraTooltip?: ReactNode
+}> = ({ scope, address, alwaysTrim, plain, extraTooltip }) => {
+  const { isTablet } = useScreenSize()
+  const to = RouteUtils.getAccountRoute(scope, address)
+
+  const tooltipPostfix = extraTooltip ? (
+    <>
+      <InfoIcon />
+      {extraTooltip}
+    </>
+  ) : undefined
+
+  // Are we in a table?
+  if (alwaysTrim) {
+    // In a table, we only ever want one short line
+
+    return (
+      <WithTypographyAndLink to={to} plain={plain}>
+        <MaybeWithTooltip title={address}>{trimLongString(address, 6, 6)}</MaybeWithTooltip>
+      </WithTypographyAndLink>
+    )
+  }
+
+  if (!isTablet) {
+    // Details in desktop mode.
+    // We want one long line, with name and address.
+
+    return (
+      <WithTypographyAndLink to={to} plain={plain}>
+        <MaybeWithTooltip title={tooltipPostfix}>{address} </MaybeWithTooltip>
+      </WithTypographyAndLink>
+    )
+  }
+
+  // We need to show the data in details mode on mobile.
+  // We want two lines, one for name (if available), one for address
+  // Both line adaptively shortened to fill available space
+  return (
+    <WithTypographyAndLink to={to} plain={plain} mobile>
+      <AdaptiveTrimmer text={address} strategy="middle" extraTooltip={extraTooltip} />
+    </WithTypographyAndLink>
+  )
+}

src/app/components/Account/ContractCreatorInfo.tsx

@@ -14,7 +14,11 @@ import Box from '@mui/material/Box'
 import Skeleton from '@mui/material/Skeleton'
 import { useScreenSize } from '../../hooks/useScreensize'
 
-const TxSender: FC<{ scope: SearchScope; txHash: string }> = ({ scope, txHash }) => {
+const TxSender: FC<{ scope: SearchScope; txHash: string; alwaysTrim?: boolean }> = ({
+  scope,
+  txHash,
+  alwaysTrim,
+}) => {
   const { t } = useTranslation()
   if (scope.layer === Layer.consensus) {
     throw AppErrors.UnsupportedLayer
@@ -31,7 +35,7 @@ const TxSender: FC<{ scope: SearchScope; txHash: string }> = ({ scope, txHash })
       }}
     />
   ) : senderAddress ? (
-    <AccountLink scope={scope} address={senderAddress} alwaysTrim />
+    <AccountLink scope={scope} address={senderAddress} alwaysTrim={alwaysTrim} />
   ) : (
     t('common.missing')
   )
@@ -41,7 +45,8 @@ export const ContractCreatorInfo: FC<{
   scope: SearchScope
   isLoading?: boolean
   creationTxHash: string | undefined
-}> = ({ scope, isLoading, creationTxHash }) => {
+  alwaysTrim?: boolean
+}> = ({ scope, isLoading, creationTxHash, alwaysTrim }) => {
   const { t } = useTranslation()
   const { isMobile } = useScreenSize()
 
@@ -59,17 +64,18 @@ export const ContractCreatorInfo: FC<{
         minWidth: '25%',
       }}
     >
-      <TxSender scope={scope} txHash={creationTxHash} />
+      <TxSender scope={scope} txHash={creationTxHash} alwaysTrim={alwaysTrim} />
       <Box>{t('contract.createdAt')}</Box>
-      <TransactionLink scope={scope} hash={creationTxHash} alwaysTrim />
+      <TransactionLink scope={scope} hash={creationTxHash} alwaysTrim={alwaysTrim} />
     </Box>
   )
 }
 
 export const DelayedContractCreatorInfo: FC<{
   scope: SearchScope
   contractOasisAddress: string | undefined
-}> = ({ scope, contractOasisAddress }) => {
+  alwaysTrim?: boolean
+}> = ({ scope, contractOasisAddress, alwaysTrim }) => {
   const accountQuery = useGetRuntimeAccountsAddress(
     scope.network,
     scope.layer as Runtime,
@@ -82,6 +88,11 @@ export const DelayedContractCreatorInfo: FC<{
   const creationTxHash = contract?.eth_creation_tx || contract?.creation_tx
 
   return (
-    <ContractCreatorInfo scope={scope} isLoading={accountQuery.isLoading} creationTxHash={creationTxHash} />
+    <ContractCreatorInfo
+      scope={scope}
+      isLoading={accountQuery.isLoading}
+      creationTxHash={creationTxHash}
+      alwaysTrim={alwaysTrim}
+    />
   )
 }

src/app/components/Account/index.tsx

@@ -100,6 +100,7 @@ export const Account: FC<AccountProps> = ({ account, token, isLoading, tokenPric
                 <ContractCreatorInfo
                   scope={account}
                   creationTxHash={contract.eth_creation_tx || contract.creation_tx}
+                  alwaysTrim
                 />
               </dd>
             </>

src/app/components/AccountList/index.tsx

@@ -39,7 +39,7 @@ export const AccountList: FC<AccountListProps> = ({ isLoading, limit, pagination
         key: 'size',
       },
       {
-        content: <AccountLink scope={account} address={account.address} />,
+        content: <AccountLink scope={account} address={account.address} alwaysTrim />,
         key: 'address',
       },
       ...(verbose

src/app/components/AdaptiveTrimmer/AdaptiveTrimmer.tsx

@@ -0,0 +1,140 @@
+import { FC, ReactNode, useCallback, useEffect, useRef, useState } from 'react'
+import Box from '@mui/material/Box'
+import InfoIcon from '@mui/icons-material/Info'
+import { trimLongString } from '../../utils/trimLongString'
+import { MaybeWithTooltip } from './MaybeWithTooltip'
+
+type AdaptiveTrimmerProps = {
+  text: string | undefined
+  strategy: 'middle' | 'end'
+  extraTooltip?: ReactNode
+}
+
+/**
+ * Display content, potentially shortened as needed.
+ *
+ * This component will do automatic detection of available space,
+ * and determine the best way to display content accordingly.
+ */
+export const AdaptiveTrimmer: FC<AdaptiveTrimmerProps> = ({ text = '', strategy = 'end', extraTooltip }) => {
+  // Initial setup
+  const fullLength = text.length
+  const textRef = useRef<HTMLDivElement | null>(null)
+
+  // Data about the currently rendered version
+  const [currentContent, setCurrentContent] = useState('')
+  const [currentLength, setCurrentLength] = useState(0)
+
+  // Known good - this fits
+  const [largestKnownGood, setLargestKnownGood] = useState(0)
+
+  // Known bad - this doesn't fit
+  const [smallestKnownBad, setSmallestKnownBad] = useState(fullLength + 1)
+
+  // Are we exploring our possibilities now?
+  const [inDiscovery, setInDiscovery] = useState(false)
+
+  const attemptContent = useCallback((content: string, length: number) => {
+    setCurrentContent(content)
+    setCurrentLength(length)
+  }, [])
+
+  const attemptShortenedContent = useCallback(
+    (length: number) => {
+      const content =
+        strategy === 'middle'
+          ? trimLongString(text, Math.floor(length / 2) - 1, Math.floor(length / 2) - 1)!
+          : trimLongString(text, length, 0)!
+
+      attemptContent(content, length)
+    },
+    [strategy, text, attemptContent],
+  )
+
+  const initDiscovery = useCallback(() => {
+    setLargestKnownGood(0)
+    setSmallestKnownBad(fullLength + 1)
+    attemptContent(text, fullLength)
+    setInDiscovery(true)
+  }, [text, fullLength, attemptContent])
+
+  useEffect(() => {
+    initDiscovery()
+    const handleResize = () => {
+      initDiscovery()
+    }
+
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [initDiscovery])
+
+  useEffect(() => {
+    if (inDiscovery) {
+      if (!textRef.current) {
+        return
+      }
+      const isOverflow = textRef.current.scrollWidth > textRef.current.clientWidth
+
+      if (isOverflow) {
+        // This is too much
+
+        // Update known bad length
+        const newSmallestKnownBad = Math.min(currentLength, smallestKnownBad)
+        setSmallestKnownBad(newSmallestKnownBad)
+
+        // We should try something smaller
+        attemptShortenedContent(Math.floor((largestKnownGood + newSmallestKnownBad) / 2))
+      } else {
+        // This is OK
+
+        // Update known good length
+        const newLargestKnownGood = Math.max(currentLength, largestKnownGood)
+        setLargestKnownGood(currentLength)
+
+        if (currentLength === fullLength) {
+          // The whole thing fits, so we are good.
+          setInDiscovery(false)
+        } else {
+          if (currentLength + 1 === smallestKnownBad) {
+            // This the best we can do, for now
+            setInDiscovery(false)
+          } else {
+            // So far, so good, but we should try something longer
+            attemptShortenedContent(Math.floor((newLargestKnownGood + smallestKnownBad) / 2))
+          }
+        }
+      }
+    }
+  }, [inDiscovery, currentLength, largestKnownGood, smallestKnownBad, attemptShortenedContent, fullLength])
+
+  if (!text) return null
+
+  const title =
+    currentLength !== fullLength ? (
+      <Box>
+        <Box>{text}</Box>
+        {extraTooltip && (
+          <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}>
+            <InfoIcon />
+            {extraTooltip}
+          </Box>
+        )}
+      </Box>
+    ) : (
+      extraTooltip
+    )
+
+  return (
+    <Box
+      ref={textRef}
+      sx={{
+        overflow: 'hidden',
+        maxWidth: '100%',
+      }}
+    >
+      <MaybeWithTooltip title={title} spanSx={{ whiteSpace: 'nowrap' }}>
+        {currentContent}
+      </MaybeWithTooltip>
+    </Box>
+  )
+}