fix: mf-1443 crash on persona searching

packages/mask/src/components/shared/SelectRecipients/ProfileInList.tsx

@@ -1,13 +1,14 @@
-import { useCallback } from 'react'
-import { ListItemText, Checkbox, ListItemAvatar, ListItem } from '@mui/material'
-import { makeStyles, ShadowRootTooltip } from '@masknet/theme'
-import Highlighter from 'react-highlight-words'
-import { formatPersonaFingerprint, ProfileInformationFromNextID } from '@masknet/shared-base'
-import { Avatar } from '../../../utils/components/Avatar'
 import { CopyIcon } from '@masknet/icons'
+import { useSnackbarCallback } from '@masknet/shared'
+import { formatPersonaFingerprint, ProfileInformationFromNextID } from '@masknet/shared-base'
+import { makeStyles, ShadowRootTooltip } from '@masknet/theme'
+import { Checkbox, ListItem, ListItemAvatar, ListItemText } from '@mui/material'
 import { truncate } from 'lodash-unified'
-import { useI18N } from '../../../utils'
+import { useCallback } from 'react'
+import Highlighter from 'react-highlight-words'
 import { useCopyToClipboard } from 'react-use'
+import { useI18N } from '../../../utils'
+import { Avatar } from '../../../utils/components/Avatar'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -93,6 +94,18 @@ export function ProfileInList(props: ProfileInListProps) {
     const profile = props.item
 
     const [, copyToClipboard] = useCopyToClipboard()
+    const rawPublicKey = profile.linkedPersona?.rawPublicKey
+    const onCopyPubkey = useSnackbarCallback(
+        async () => {
+            if (!rawPublicKey) return
+            copyToClipboard(rawPublicKey)
+        },
+        [rawPublicKey],
+        undefined,
+        undefined,
+        undefined,
+        t('copied'),
+    )
     const highlightText = (() => {
         if (!profile.fromNextID) return `@${profile.identifier.userId || profile.nickname}`
         const mentions = profile.linkedTwitterNames.map((x) => '@' + x).join(' ')
@@ -150,14 +163,7 @@ export function ProfileInList(props: ProfileInListProps) {
                             autoEscape
                             textToHighlight={textToHighlight}
                         />
-                        <CopyIcon
-                            className={classes.actionIcon}
-                            onClick={() => {
-                                const rawPublicKey = profile.linkedPersona?.rawPublicKey
-                                if (!rawPublicKey) return
-                                copyToClipboard(rawPublicKey.toUpperCase())
-                            }}
-                        />
+                        <CopyIcon className={classes.actionIcon} onClick={onCopyPubkey} />
                         {profile.fromNextID && <div className={classes.badge}>Next.ID</div>}
                     </div>
                 }

packages/mask/src/components/shared/SelectRecipients/SelectRecipients.tsx

@@ -1,7 +1,6 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import {
     ProfileInformation as Profile,
-    EMPTY_LIST,
     NextIDPlatform,
     ECKeyIdentifier,
     ProfileInformationFromNextID,
@@ -51,13 +50,12 @@ export function SelectRecipientsUI(props: SelectRecipientsUIProps) {
         type ?? NextIDPlatform.NextID,
         value,
     )
-    const NextIDItems = useTwitterIdByWalletSearch(NextIDResults, value, type)
-    const profileItems = items.recipients?.filter((x) => x.identifier !== currentIdentity?.identifier)
 
-    const searchedList = uniqBy(
-        profileItems?.concat(NextIDItems) ?? [],
-        ({ linkedPersona }) => linkedPersona?.rawPublicKey,
-    )
+    const NextIDItems = useTwitterIdByWalletSearch(NextIDResults, value, type)
+    const searchedList = useMemo(() => {
+        const profileItems = items.recipients?.filter((x) => x.identifier !== currentIdentity?.identifier)
+        return uniqBy(profileItems?.concat(NextIDItems) ?? [], ({ linkedPersona }) => linkedPersona?.rawPublicKey)
+    }, [NextIDItems, items.recipients])
 
     const onSelect = async (item: ProfileInformationFromNextID) => {
         onSetSelected([...selected, item])
@@ -85,7 +83,7 @@ export function SelectRecipientsUI(props: SelectRecipientsUIProps) {
                 setValueToSearch(v)
             }}
             open={open}
-            items={searchedList || EMPTY_LIST}
+            items={searchedList}
             selected={selected}
             disabled={false}
             submitDisabled={false}

packages/mask/src/components/shared/SelectRecipients/SelectRecipientsDialog.tsx

@@ -102,7 +102,7 @@ export function SelectRecipientsDialogUI(props: SelectRecipientsDialogUIProps) {
         setSearch('')
         onSearch('')
     }, [props.open])
-    const itemsAfterSearch = useMemo(() => {
+    const searchedItems = useMemo(() => {
         const fuse = new Fuse(items, {
             keys: [
                 'identifier.userId',
@@ -151,15 +151,15 @@ export function SelectRecipientsDialogUI(props: SelectRecipientsDialogUIProps) {
                     </div>
                 ) : (
                     <div className={classes.list}>
-                        {itemsAfterSearch.length === 0 ? (
+                        {searchedItems.length === 0 ? (
                             <div className={classes.empty}>
                                 <SearchEmptyIcon style={{ width: 36, height: 36 }} />
                                 <Typography>
                                     {props.searchEmptyText ?? t('compose_encrypt_share_dialog_empty')}
                                 </Typography>
                             </div>
                         ) : (
-                            itemsAfterSearch.map((item, idx) => (
+                            searchedItems.map((item, idx) => (
                                 <ProfileInList
                                     key={idx}
                                     item={item as ProfileInformationFromNextID}

packages/mask/src/components/shared/SelectRecipients/useTwitterIdByWalletSearch.tsx

@@ -5,20 +5,21 @@ import {
     NextIDPlatform,
     ProfileIdentifier,
 } from '@masknet/shared-base'
-import { uniqBy } from 'lodash-unified'
+import { compact, uniqBy } from 'lodash-unified'
 
 export function useTwitterIdByWalletSearch(
     bindings: NextIDPersonaBindings[] | undefined,
     value: string,
     type?: NextIDPlatform,
 ) {
-    if (!bindings || !type) return EMPTY_LIST
+    if (!bindings?.length || !type) return EMPTY_LIST
 
-    return bindings.map((binding) => {
+    const nextIdAccounts = bindings.map((binding) => {
         const proofs = uniqBy(
             binding.proofs.filter((x) => x.platform === NextIDPlatform.Twitter),
             (proof) => proof.identity,
         )
+        if (!proofs.length) return null
         const linkedTwitterNames = proofs.map((x) => x.identity)
         return {
             nickname: proofs[0].identity,
@@ -29,4 +30,5 @@ export function useTwitterIdByWalletSearch(
             linkedPersona: ECKeyIdentifier.fromHexPublicKeyK256(binding.persona).unwrap(),
         }
     })
+    return compact(nextIdAccounts)
 }