fix: truncate search item label text

JoinColony · Jan 28, 2025 · ea74e41 · ea74e41
1 parent 82fea20
commit ea74e41
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 4 deletions.
diff --git a/src/components/v5/shared/SearchSelect/partials/CheckboxSearchItem/CheckboxSearchItem.tsx b/src/components/v5/shared/SearchSelect/partials/CheckboxSearchItem/CheckboxSearchItem.tsx
@@ -4,6 +4,7 @@ import React, { type FC } from 'react';
 
 import { DomainColor } from '~gql';
 import { useMobile } from '~hooks/index.ts';
+import MaskedAddress from '~shared/MaskedAddress/MaskedAddress.tsx';
 import { getEnumValueFromKey } from '~utils/getEnumValueFromKey.ts';
 import { formatText } from '~utils/intl.ts';
 import { getTeamColor } from '~utils/teams.ts';
@@ -13,6 +14,8 @@ import { sortDisabled } from '~v5/shared/SearchSelect/utils.ts';
 import { TokenAvatar } from '~v5/shared/TokenAvatar/TokenAvatar.tsx';
 import UserAvatar from '~v5/shared/UserAvatar/index.ts';
 
+import { SearchItemLabelText } from '../SearchItemLabelText/index.tsx';
+
 import { type CheckboxSearchItemProps } from './types.ts';
 
 const displayName = 'v5.SearchSelect.partials.CheckboxSearchItem';
@@ -123,13 +126,23 @@ const CheckboxSearchItem: FC<CheckboxSearchItemProps> = ({
                       size={20}
                     />
                   )}
-                  {isLabelVisible && labelText}
+
+                  {isLabelVisible && (
+                    <span className="truncate">
+                      <SearchItemLabelText labelText={labelText} />
+                    </span>
+                  )}
                   {isVerified && (
                     <span className="ml-1 flex text-blue-400">
                       <SealCheck size={14} />
                     </span>
                   )}
-                  {!label && <span className="truncate">{walletAddress}</span>}
+                  {!label && (
+                    <span className="truncate">
+                      <MaskedAddress address={walletAddress} />
+                    </span>
+                  )}
+
                   {firstDisabledOption?.value === value && (
                     <div className="absolute right-0 top-1/2 -translate-y-1/2 transform">
                       <ExtensionsStatusBadge

diff --git a/src/components/v5/shared/SearchSelect/partials/SearchItem/SearchItem.tsx b/src/components/v5/shared/SearchSelect/partials/SearchItem/SearchItem.tsx
@@ -4,6 +4,7 @@ import React, { type FC } from 'react';
 
 import { DomainColor } from '~gql';
 import { useMobile } from '~hooks/index.ts';
+import MaskedAddress from '~shared/MaskedAddress/MaskedAddress.tsx';
 import { getEnumValueFromKey } from '~utils/getEnumValueFromKey.ts';
 import { formatText } from '~utils/intl.ts';
 import { getTeamColor } from '~utils/teams.ts';
@@ -12,6 +13,8 @@ import { sortDisabled } from '~v5/shared/SearchSelect/utils.ts';
 import { TokenAvatar } from '~v5/shared/TokenAvatar/TokenAvatar.tsx';
 import { UserAvatar } from '~v5/shared/UserAvatar/UserAvatar.tsx';
 
+import { SearchItemLabelText } from '../SearchItemLabelText/index.tsx';
+
 import { type SearchItemProps } from './types.ts';
 
 const displayName = 'v5.SearchSelect.partials.SearchItem';
@@ -112,8 +115,12 @@ const SearchItem: FC<SearchItemProps> = ({
                       size={20}
                     />
                   )}
-                  {isLabelVisible && labelText}
-                  {!label && <span className="truncate">{walletAddress}</span>}
+                  <span className="truncate">
+                    {isLabelVisible && (
+                      <SearchItemLabelText labelText={labelText} />
+                    )}
+                    {!label && <MaskedAddress address={walletAddress} />}
+                  </span>
                   {isVerified && (
                     <CircleWavyCheck
                       size={14}

diff --git a/src/components/v5/shared/SearchSelect/partials/SearchItemLabelText/index.tsx b/src/components/v5/shared/SearchSelect/partials/SearchItemLabelText/index.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import MaskedAddress from '~shared/MaskedAddress/index.ts';
+import { isAddress } from '~utils/web3/index.ts';
+
+export const SearchItemLabelText = ({ labelText }: { labelText: string }) => {
+  const lowerCasedLabelText = labelText.toLowerCase();
+
+  return isAddress(lowerCasedLabelText) ? (
+    <MaskedAddress address={lowerCasedLabelText} />
+  ) : (
+    <>{labelText}</>
+  );
+};