DimensionDev · guanbinrui · Feb 20, 2025 · Feb 18, 2025 · Feb 18, 2025 · Feb 18, 2025
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "yarn": ">=999.0.0",
     "npm": ">=999.0.0"
   },
-  "version": "2.31.3",
+  "version": "2.31.4",
   "private": true,
   "license": "AGPL-3.0-or-later",
   "scripts": {

diff --git a/packages/mask/background/tasks/NotCancellable/OnInstall.ts b/packages/mask/background/tasks/NotCancellable/OnInstall.ts
@@ -48,3 +48,5 @@ browser.runtime.onInstalled.addListener(async (detail) => {
         }
     }
 })
+
+browser.runtime.setUninstallURL('https://www.mask.io/feedback')
diff --git a/packages/mask/content-script/components/InjectedComponents/ProfileCard/ProfileCardTitle.tsx b/packages/mask/content-script/components/InjectedComponents/ProfileCard/ProfileCardTitle.tsx
@@ -11,7 +11,7 @@ import {
 } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
 import type { Web3Helper } from '@masknet/web3-helpers'
-import { NextIDProof } from '@masknet/web3-providers'
+import { Web3Bio } from '@masknet/web3-providers'
 import { useQuery } from '@tanstack/react-query'
 import type { HTMLProps } from 'react'
 import { useLastRecognizedIdentity } from '../../DataSource/useActivatedUI.js'
@@ -105,12 +105,12 @@ export function ProfileCardTitle({
 
     const userId = identity?.identifier?.userId
     const itsMe = !!userId && userId === me?.identifier?.userId
-    const { data: nextIdBindings = EMPTY_LIST } = useQuery({
-        queryKey: ['next-id', 'profiles-by-twitter-id', userId],
+    const { data: web3bioProfiles = EMPTY_LIST } = useQuery({
+        queryKey: ['web3bio', 'profiles-by-twitter-id', userId],
         enabled: !!userId,
         queryFn: async () => {
             if (!userId) return EMPTY_LIST
-            return NextIDProof.queryProfilesByTwitterId(userId)
+            return Web3Bio.getProfilesByTwitterId(userId)
         },
     })
     const tipsDisabled = useIsMinimalMode(PluginID.Tips)
@@ -131,9 +131,9 @@ export function ProfileCardTitle({
                 address={address}
                 onAddressChange={onAddressChange}>
                 <div className={classes.operations}>
-                    {nextIdBindings.length ?
+                    {web3bioProfiles.length ?
                         <SocialAccountList
-                            nextIdBindings={nextIdBindings}
+                            web3bioProfiles={web3bioProfiles}
                             userId={userId}
                             disablePortal
                             anchorPosition={{

diff --git a/packages/mask/content-script/components/InjectedComponents/ProfileTabContent.tsx b/packages/mask/content-script/components/InjectedComponents/ProfileTabContent.tsx
@@ -1,48 +1,51 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { useUpdateEffect } from 'react-use'
-import { first } from 'lodash-es'
-import { TabContext } from '@mui/lab'
-import { Button, Stack, Tab, ThemeProvider, Typography } from '@mui/material'
+import Services from '#services'
+import { Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
-import { useQuery } from '@tanstack/react-query'
-import { Telemetry } from '@masknet/web3-telemetry'
-import { EventType, EventID } from '@masknet/web3-telemetry/types'
+import { getAvailablePlugins } from '@masknet/plugin-infra'
 import {
+    getProfileTabContent,
     useActivatedPluginsSiteAdaptor,
     useIsMinimalMode,
     usePluginTransField,
-    getProfileTabContent,
 } from '@masknet/plugin-infra/content-script'
-import { getAvailablePlugins } from '@masknet/plugin-infra'
 import {
     AddressItem,
+    addressSorter,
     ConnectPersonaBoundary,
     GrantPermissions,
+    LoadingStatus,
     PluginCardFrameMini,
-    useCurrentPersonaConnectStatus,
-    useSocialAccountsBySettings,
-    TokenWithSocialGroupMenu,
     SocialAccountList,
+    TokenWithSocialGroupMenu,
     useCollectionByTwitterHandle,
-    addressSorter,
+    useCurrentPersonaConnectStatus,
+    useSocialAccountsBySettings,
     WalletSettingsEntry,
-    LoadingStatus,
 } from '@masknet/shared'
 import {
     CrossIsolationMessages,
+    currentPersonaIdentifier,
     EMPTY_LIST,
     MaskMessages,
     NextIDPlatform,
     PluginID,
     ProfileTabs,
     Sniffings,
-    currentPersonaIdentifier,
 } from '@masknet/shared-base'
-import { useValueRef, useLocationChange } from '@masknet/shared-base-ui'
+import { useLocationChange, useValueRef } from '@masknet/shared-base-ui'
 import { makeStyles, MaskLightTheme, MaskTabList, useTabs } from '@masknet/theme'
-import { NextIDProof } from '@masknet/web3-providers'
-import { isSameAddress } from '@masknet/web3-shared-base'
 import { ScopedDomainsContainer, useSnapshotSpacesByTwitterHandle } from '@masknet/web3-hooks-base'
+import { Web3Bio } from '@masknet/web3-providers'
+import { isSameAddress } from '@masknet/web3-shared-base'
+import { Telemetry } from '@masknet/web3-telemetry'
+import { EventID, EventType } from '@masknet/web3-telemetry/types'
+import { TabContext } from '@mui/lab'
+import { Button, Stack, Tab, ThemeProvider, Typography } from '@mui/material'
+import { useQuery } from '@tanstack/react-query'
+import { first } from 'lodash-es'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useUpdateEffect } from 'react-use'
+import { usePersonasFromDB } from '../../../shared-ui/hooks/usePersonasFromDB.js'
 import {
     useCurrentVisitingIdentity,
     useLastRecognizedIdentity,
@@ -51,9 +54,6 @@ import {
 } from '../DataSource/useActivatedUI.js'
 import { useGrantPermissions, usePluginHostPermissionCheck } from '../DataSource/usePluginHostPermission.js'
 import { SearchResultInspector } from './SearchResultInspector.js'
-import { usePersonasFromDB } from '../../../shared-ui/hooks/usePersonasFromDB.js'
-import Services from '#services'
-import { Trans } from '@lingui/react/macro'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -306,11 +306,11 @@ function Content(props: ProfileTabContentProps) {
 
     const { data: identity } = useSocialIdentityByUserId(currentVisitingUserId)
 
-    const { data: nextIdBindings = EMPTY_LIST } = useQuery({
-        queryKey: ['profiles', 'by-twitter-id', currentVisitingUserId],
+    const { data: web3bioProfiles = EMPTY_LIST } = useQuery({
+        queryKey: ['web3bio', 'by-twitter-id', currentVisitingUserId],
         queryFn: () => {
             if (!currentVisitingUserId) return EMPTY_LIST
-            return NextIDProof.queryProfilesByTwitterId(currentVisitingUserId)
+            return Web3Bio.getProfilesByTwitterId(currentVisitingUserId)
         },
     })
 
@@ -465,7 +465,7 @@ function Content(props: ProfileTabContentProps) {
                                 fromSocialCard
                             />
 
-                            <SocialAccountList nextIdBindings={nextIdBindings} userId={currentVisitingUserId} />
+                            <SocialAccountList web3bioProfiles={web3bioProfiles} userId={currentVisitingUserId} />
                         </div>
                         <div className={classes.settingItem}>
                             <Trans>

diff --git a/packages/mask/popups/hooks/useFriendProfiles.ts b/packages/mask/popups/hooks/useFriendProfiles.ts
@@ -1,34 +1,41 @@
-import {
-    EMPTY_LIST,
-    NextIDPlatform,
-    type BindingProof,
-    type ProfileIdentifier,
-    type EnhanceableSite,
-} from '@masknet/shared-base'
-import { NextIDProof } from '@masknet/web3-providers'
+import { EMPTY_LIST, type EnhanceableSite, NextIDPlatform, type ProfileIdentifier } from '@masknet/shared-base'
+import { Web3Bio } from '@masknet/web3-providers'
 import { useQuery } from '@tanstack/react-query'
-import { useCurrentPersona } from '../../shared-ui/hooks/index.js'
-import { PlatformSort, UnsupportedPlatforms } from '../pages/Friends/common.js'
 import { useMemo } from 'react'
+import { useCurrentPersona } from '../../shared-ui/hooks/index.js'
+import { PlatformSort, UnsupportedPlatforms, type Profile } from '../pages/Friends/common.js'
 
-export function profilesFilter(x: BindingProof) {
-    return (x.platform === NextIDPlatform.ENS && x.name.endsWith('.eth')) || !UnsupportedPlatforms.includes(x.platform)
+export function profilesFilter(x: Profile) {
+    return (
+        (x.platform === NextIDPlatform.ENS && x.name.endsWith('.eth')) ||
+        !UnsupportedPlatforms.includes(x.platform as NextIDPlatform)
+    )
 }
 
-export function useFriendProfiles(seen: boolean, nextId?: string, profile?: ProfileIdentifier) {
+export function useFriendProfiles(seen: boolean, nextId?: string, profile?: ProfileIdentifier): Profile[] {
     const currentPersona = useCurrentPersona()
 
     const { data: profiles = EMPTY_LIST } = useQuery({
+        enabled: seen && !!nextId,
         queryKey: ['profiles', currentPersona?.identifier.publicKeyAsHex, nextId],
         queryFn: async () => {
             if (!nextId) return EMPTY_LIST
             try {
-                return await NextIDProof.queryProfilesByPublicKey(nextId, 2)
+                return await Web3Bio.getProfilesByNextId(nextId)
             } catch (error) {
                 return EMPTY_LIST
             }
         },
-        enabled: seen && !!nextId,
+        select(profiles) {
+            return profiles.map((profile) => ({
+                platform: profile.platform,
+                identity: profile.identity,
+                is_valid: true,
+                last_checked_at: '',
+                name: profile.displayName,
+                created_at: '',
+            }))
+        },
     })
     return useMemo(() => {
         if (profiles.length === 0) {
@@ -50,6 +57,6 @@ export function useFriendProfiles(seen: boolean, nextId?: string, profile?: Prof
                 return EMPTY_LIST
             }
         }
-        return profiles.filter(profilesFilter).sort((a, b) => PlatformSort[a.platform] - PlatformSort[b.platform])
+        return profiles.sort((a, b) => PlatformSort[a.platform] - PlatformSort[b.platform])
     }, [profiles])
 }
diff --git a/packages/mask/popups/hooks/useFriendsFromSearch.tsx b/packages/mask/popups/hooks/useFriendsFromSearch.tsx
@@ -22,29 +22,28 @@ export function useFriendsFromSearch(
     const currentIdentifier = useCurrentLinkedPersona()
     return useMemo(() => {
         if (!searchResult?.length && !localSearchedResult?.length) return EMPTY_LIST
-        const localProfiles: NextIDPersonaBindingsWithIdentifier[] =
-            localSearchedResult
-                .filter((x) => x.persona.publicKeyAsHex !== currentIdentifier?.identifier.publicKeyAsHex && x.profile)
-                .map((item) => {
-                    const profile = item.profile!
-                    return {
-                        proofs: [
-                            {
-                                platform: profile.network as FriendNetwork,
-                                identity: profile.userId,
-                                is_valid: true,
-                                last_checked_at: '',
-                                name: profile.userId,
-                                created_at: '',
-                            },
-                        ],
-                        linkedPersona: item.persona,
-                        activated_at: '',
-                        persona: item.persona.publicKeyAsHex,
-                        isLocal: true,
-                        avatar: item.avatar,
-                    }
-                }) ?? EMPTY_LIST
+        const localProfiles: NextIDPersonaBindingsWithIdentifier[] = localSearchedResult
+            .filter((x) => x.persona.publicKeyAsHex !== currentIdentifier?.identifier.publicKeyAsHex && x.profile)
+            .map((item) => {
+                const profile = item.profile!
+                return {
+                    proofs: [
+                        {
+                            platform: profile.network as FriendNetwork,
+                            identity: profile.userId,
+                            is_valid: true,
+                            last_checked_at: '',
+                            name: profile.userId,
+                            created_at: '',
+                        },
+                    ],
+                    linkedPersona: item.persona,
+                    activated_at: '',
+                    persona: item.persona.publicKeyAsHex,
+                    isLocal: true,
+                    avatar: item.avatar,
+                }
+            })
         const profiles: NextIDPersonaBindingsWithIdentifier[] =
             searchResult ?
                 searchResult

diff --git a/packages/mask/popups/pages/Friends/AccountRender/index.tsx b/packages/mask/popups/pages/Friends/AccountRender/index.tsx
@@ -41,8 +41,8 @@ export const AccountRender = memo<AccountRenderProps>(function AccountRender({ p
                     profile.name
                 :   profile.identity
             return detail ?
-                    <DetailAccount userId={_userID} platform={profile.platform} />
-                :   <Account userId={_userID} platform={profile.platform} />
+                    <DetailAccount userId={_userID} displayName={profile.name} platform={profile.platform} />
+                :   <Account userId={_userID} displayName={profile.name} platform={profile.platform} />
         case NextIDPlatform.CyberConnect:
         case NextIDPlatform.Bit:
         case NextIDPlatform.SYBIL:

diff --git a/packages/mask/popups/pages/Friends/ContactCard/Account/index.tsx b/packages/mask/popups/pages/Friends/ContactCard/Account/index.tsx
@@ -1,15 +1,15 @@
 import { memo } from 'react'
 import { Box, Link } from '@mui/material'
 import { Icons } from '@masknet/icons'
-import { makeStyles } from '@masknet/theme'
+import { makeStyles, TextOverflowTooltip } from '@masknet/theme'
 import { NextIDPlatform } from '@masknet/shared-base'
 import { formatEthereumAddress } from '@masknet/web3-shared-evm'
-import { formatUserId } from '../SocialAccount/index.js'
 import { PlatformIconMap, PlatformUrlMap, type SupportedPlatforms } from '../../common.js'
 
 interface AccountProps {
     platform: SupportedPlatforms
     userId?: string
+    displayName?: string
 }
 
 const useStyles = makeStyles()((theme) => ({
@@ -24,20 +24,34 @@ const useStyles = makeStyles()((theme) => ({
         fontStyle: 'normal',
         fontWeight: 700,
         lineHeight: '18px',
+        minWidth: 0,
+    },
+    name: {
+        flexGrow: 1,
+        minWidth: 0,
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
     },
 }))
 
-export const Account = memo<AccountProps>(function Account({ userId, platform }) {
+export const Account = memo<AccountProps>(function Account({ userId, displayName, platform }) {
     const { classes } = useStyles()
     const Icon = PlatformIconMap[platform]
 
     if (!userId) return null
+    const name =
+        platform === NextIDPlatform.Ethereum ? formatEthereumAddress(userId, 4)
+        : platform === NextIDPlatform.Farcaster && displayName ? displayName
+        : userId
 
     return (
         <Box width="156px" padding="4px" display="flex" gap="10px" alignItems="center">
             <Icon size={30} />
             <Box className={classes.userId}>
-                {platform === NextIDPlatform.Ethereum ? formatEthereumAddress(userId, 4) : formatUserId(userId)}
+                <TextOverflowTooltip title={name}>
+                    <span className={classes.name}>{name}</span>
+                </TextOverflowTooltip>
                 <Link
                     underline="none"
                     target="_blank"

diff --git a/packages/mask/popups/pages/Friends/ContactCard/SocialAccount/index.tsx b/packages/mask/popups/pages/Friends/ContactCard/SocialAccount/index.tsx
@@ -1,6 +1,6 @@
 import { Icons } from '@masknet/icons'
 import { EnhanceableSite, twitterDomainMigrate } from '@masknet/shared-base'
-import { makeStyles } from '@masknet/theme'
+import { makeStyles, TextOverflowTooltip } from '@masknet/theme'
 import { FireflyTwitter } from '@masknet/web3-providers'
 import { Box, Link } from '@mui/material'
 import { useQuery } from '@tanstack/react-query'
@@ -31,15 +31,15 @@ const useStyles = makeStyles()((theme) => ({
         fontWeight: 700,
         lineHeight: '18px',
     },
+    name: {
+        flexGrow: 1,
+        minWidth: 0,
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+    },
 }))
 
-export const formatUserId = (userId: string) => {
-    if (userId.length > 7) {
-        return `${userId.slice(0, 7)}...`
-    }
-    return userId
-}
-
 export const SocialAccount = memo<SocialAccountProps>(function SocialAccount({ avatar, userId, site }) {
     const isOnTwitter = site === EnhanceableSite.Twitter
     const { data: twitterAvatar = avatar } = useQuery({
@@ -52,6 +52,7 @@ export const SocialAccount = memo<SocialAccountProps>(function SocialAccount({ a
     })
     const userAvatar = isOnTwitter ? twitterAvatar : avatar
     const { classes } = useStyles()
+    const name = `@${userId}`
     return (
         <Box width="156px" padding="4px" display="flex" gap="10px" alignItems="center">
             <AccountAvatar
@@ -61,7 +62,9 @@ export const SocialAccount = memo<SocialAccountProps>(function SocialAccount({ a
                 classes={{ avatar: classes.avatar, container: classes.avatar }}
             />
             <Box className={classes.userId}>
-                {`@${formatUserId(userId)}`}
+                <TextOverflowTooltip title={name}>
+                    <span className={classes.name}>{name}</span>
+                </TextOverflowTooltip>
                 <Link
                     underline="none"
                     target="_blank"

diff --git a/packages/mask/popups/pages/Friends/ContactCard/index.tsx b/packages/mask/popups/pages/Friends/ContactCard/index.tsx
@@ -103,7 +103,7 @@ export const ContactCard = memo<ContactCardProps>(function ContactCard({
                 profile: profileIdentifier,
             }
         }
-    }, [profiles, nextId, rawPublicKey])
+    }, [nextId, rawPublicKey])
 
     const handleAddFriend = useCallback(async () => {
         if (!friendInfo || !currentPersona) return
-Original file line number
+Diff line change
@@ Expand Up / @@ -48,3 +48,5 @@ browser.runtime.onInstalled.addListener(async (detail) => { @@
             }
         }
     })
+    browser.runtime.setUninstallURL('https://www.mask.io/feedback')