Shorten Nostr bech32 usernames in addition to hex pubkeys

src/components/mention.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import { isPubkey } from 'soapbox/utils/nostr';
+import { shortenNostr } from 'soapbox/utils/nostr';
 
 import { Tooltip } from './ui';
 
@@ -29,7 +29,7 @@ const Mention: React.FC<IMention> = ({ mention: { acct, username }, disabled })
         onClick={handleClick}
         dir='ltr'
       >
-        @{isPubkey(username) ? username.slice(0, 8) : username}
+        @{shortenNostr(username)}
       </Link>
     </Tooltip>
   );

src/components/status-reply-mentions.tsx

@@ -6,7 +6,7 @@ import { openModal } from 'soapbox/actions/modals';
 import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
 import HoverStatusWrapper from 'soapbox/components/hover-status-wrapper';
 import { useAppDispatch } from 'soapbox/hooks';
-import { isPubkey } from 'soapbox/utils/nostr';
+import { shortenNostr } from 'soapbox/utils/nostr';
 
 import type { Status } from 'soapbox/types/entities';
 
@@ -57,7 +57,7 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
         className='reply-mentions__account max-w-[200px] truncate align-bottom'
         onClick={(e) => e.stopPropagation()}
       >
-        @{isPubkey(account.username) ? account.username.slice(0, 8) : account.username}
+        @{shortenNostr(account.username)}
       </Link>
     );
 

src/features/compose/components/reply-mentions.tsx

@@ -5,7 +5,7 @@ import { openModal } from 'soapbox/actions/modals';
 import { useAppDispatch, useAppSelector, useCompose, useFeatures, useOwnAccount } from 'soapbox/hooks';
 import { statusToMentionsAccountIdsArray } from 'soapbox/reducers/compose';
 import { makeGetStatus } from 'soapbox/selectors';
-import { isPubkey } from 'soapbox/utils/nostr';
+import { shortenNostr } from 'soapbox/utils/nostr';
 
 import type { Status as StatusEntity } from 'soapbox/types/entities';
 
@@ -56,7 +56,7 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
     const username = acct.split('@')[0];
     return (
       <span className='reply-mentions__account'>
-        @{isPubkey(username) ? username.slice(0, 8) : username}
+        @{shortenNostr(username)}
       </span>
     );
   }).toArray();

src/utils/nostr.ts

@@ -1,6 +1,12 @@
+import { BECH32_REGEX } from 'nostr-tools/nip19';
+
 /** Check whether the given input is a valid Nostr hexadecimal pubkey. */
 const isPubkey = (value: string) => /^[0-9a-f]{64}$/i.test(value);
 
-export {
-  isPubkey,
-};
+/** If the value is a Nostr pubkey or bech32, shorten it. */
+export function shortenNostr(value: string): string {
+  if (isPubkey(value) || BECH32_REGEX.test(value)) {
+    return value.slice(0, 8);
+  }
+  return value;
+}