Support for displaying and searching for account names

.changelog/1246.feature.md

@@ -0,0 +1 @@
+Initial support for displaying account names

package.json

@@ -74,6 +74,7 @@
     "axios": "1.6.8",
     "bignumber.js": "9.1.2",
     "bip39": "^3.1.0",
+    "chance": "^1.1.11",
     "date-fns": "3.6.0",
     "i18next": "23.11.2",
     "react": "18.2.0",
@@ -101,6 +102,7 @@
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "14.2.2",
     "@testing-library/user-event": "14.5.2",
+    "@types/chance": "^1.1.6",
     "@types/jest": "^29.5.12",
     "@types/node": "20.12.7",
     "@types/node-fetch": "2.6.11",

src/app/components/Account/AccountLink.tsx

@@ -1,30 +1,141 @@
-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 { SearchScope } from '../../../types/searchScope'
+import { useAccountName } from '../../hooks/useAccountName'
+import { trimLongString } from '../../utils/trimLongString'
+import { MaybeWithTooltip } from '../AdaptiveTrimmer/MaybeWithTooltip'
+import Box from '@mui/material/Box'
+import { HighlightedText } from '../HighlightedText'
+import { AdaptiveHighlightedText } from '../HighlightedText/AdaptiveHighlightedText'
+import { AdaptiveTrimmer } from '../AdaptiveTrimmer/AdaptiveTrimmer'
+
+const WithTypographyAndLink: FC<{
+  to: string
+  mobile?: boolean
+  children: ReactNode
+}> = ({ children, to, mobile }) => {
+  return (
+    <Typography
+      variant="mono"
+      component="span"
+      sx={{
+        ...(mobile
+          ? {
+              maxWidth: '100%',
+              overflow: 'hidden',
+            }
+          : {}),
+      }}
+    >
+      <Link component={RouterLink} to={to}>
+        {children}
+      </Link>
+    </Typography>
+  )
+}
 
 interface Props {
   scope: SearchScope
   address: string
+
+  /**
+   * Should we always trim the text to a short line?
+   */
   alwaysTrim?: boolean
+
+  /**
+   * What part of the name should be highlighted (if any)
+   */
+  highlightedPartOfName?: string | undefined
+
+  /**
+   * Any extra tooltips to display
+   *
+   * (Besides the content necessary because of potential shortening)
+   */
+  extraTooltip?: ReactNode
 }
 
-export const AccountLink: FC<Props> = ({ scope, address, alwaysTrim }) => {
+export const AccountLink: FC<Props> = ({
+  scope,
+  address,
+  alwaysTrim,
+  highlightedPartOfName,
+  extraTooltip,
+}) => {
   const { isTablet } = useScreenSize()
+  const { name: accountName } = useAccountName(scope, address)
   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}>
+        <MaybeWithTooltip
+          title={
+            accountName ? (
+              <div>
+                <Box sx={{ fontWeight: 'bold' }}>{accountName}</Box>
+                <Box sx={{ fontWeight: 'normal' }}>{address}</Box>
+                {tooltipPostfix}
+              </div>
+            ) : (
+              address
+            )
+          }
+        >
+          {accountName ? trimLongString(accountName, 12, 0) : 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}>
+        <MaybeWithTooltip title={tooltipPostfix}>
+          {accountName ? (
+            <span>
+              <HighlightedText text={accountName} pattern={highlightedPartOfName} /> ({address})
+            </span>
+          ) : (
+            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 (
-    <Typography variant="mono" component="span">
-      {alwaysTrim || isTablet ? (
-        <TrimLinkLabel label={address} to={to} />
-      ) : (
-        <Link component={RouterLink} to={to}>
-          {address}
-        </Link>
-      )}
-    </Typography>
+    <WithTypographyAndLink to={to} mobile>
+      <>
+        <AdaptiveHighlightedText
+          text={accountName}
+          pattern={highlightedPartOfName}
+          extraTooltip={extraTooltip}
+        />
+        <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

@@ -30,9 +30,17 @@ type AccountProps = {
   isLoading: boolean
   tokenPrices: AllTokenPrices
   showLayer?: boolean
+  highlightedPartOfName: string | undefined
 }
 
-export const Account: FC<AccountProps> = ({ account, token, isLoading, tokenPrices, showLayer }) => {
+export const Account: FC<AccountProps> = ({
+  account,
+  token,
+  isLoading,
+  tokenPrices,
+  showLayer,
+  highlightedPartOfName,
+}) => {
   const { t } = useTranslation()
   const { isMobile } = useScreenSize()
   const address = account ? account.address_eth ?? account.address : undefined
@@ -67,7 +75,7 @@ export const Account: FC<AccountProps> = ({ account, token, isLoading, tokenPric
             <AccountAvatar account={account} />
           </StyledListTitleWithAvatar>
           <dd>
-            <AccountLink scope={account} address={address!} />
+            <AccountLink scope={account} address={address!} highlightedPartOfName={highlightedPartOfName} />
             <CopyToClipboard value={address!} />
           </dd>
 
@@ -100,6 +108,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