diff --git a/packages/mask/src/components/shared/SelectRecipients/ProfileInList.tsx b/packages/mask/src/components/shared/SelectRecipients/ProfileInList.tsx index 3f2a3f62be39..e2daa87d4761 100644 --- a/packages/mask/src/components/shared/SelectRecipients/ProfileInList.tsx +++ b/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} /> - { - const rawPublicKey = profile.linkedPersona?.rawPublicKey - if (!rawPublicKey) return - copyToClipboard(rawPublicKey.toUpperCase()) - }} - /> + {profile.fromNextID &&
Next.ID
} } diff --git a/packages/mask/src/components/shared/SelectRecipients/SelectRecipients.tsx b/packages/mask/src/components/shared/SelectRecipients/SelectRecipients.tsx index c6efd4dbbb04..615fb1a854dc 100644 --- a/packages/mask/src/components/shared/SelectRecipients/SelectRecipients.tsx +++ b/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} diff --git a/packages/mask/src/components/shared/SelectRecipients/SelectRecipientsDialog.tsx b/packages/mask/src/components/shared/SelectRecipients/SelectRecipientsDialog.tsx index 814b6e9182bf..0cb974da13ed 100644 --- a/packages/mask/src/components/shared/SelectRecipients/SelectRecipientsDialog.tsx +++ b/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,7 +151,7 @@ export function SelectRecipientsDialogUI(props: SelectRecipientsDialogUIProps) { ) : (
- {itemsAfterSearch.length === 0 ? ( + {searchedItems.length === 0 ? (
@@ -159,7 +159,7 @@ export function SelectRecipientsDialogUI(props: SelectRecipientsDialogUIProps) {
) : ( - itemsAfterSearch.map((item, idx) => ( + searchedItems.map((item, idx) => ( { + 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) }