fix(Tips): refine recipient UI

closes MF-6265

Author: swkatmask

packages/mask/content-script/components/InjectedComponents/ProfileCard/ProfileCardTitle.tsx

@@ -1,6 +1,6 @@
 import { Icons } from '@masknet/icons'
 import { useIsMinimalMode } from '@masknet/plugin-infra/content-script'
-import { TipButton } from '@masknet/plugin-tips'
+import { TipsButton } from '@masknet/plugin-tips'
 import { PersonaSelectPanelModal, SocialAccountList, useCurrentPersonaConnectStatus } from '@masknet/shared'
 import {
     CrossIsolationMessages,
@@ -14,8 +14,8 @@ import type { Web3Helper } from '@masknet/web3-helpers'
 import { Web3Bio } from '@masknet/web3-providers'
 import { useQuery } from '@tanstack/react-query'
 import type { HTMLProps } from 'react'
-import { useLastRecognizedIdentity } from '../../DataSource/useActivatedUI.js'
 import { useCurrentPersona, usePersonasFromDB } from '../../../../shared-ui/hooks/index.js'
+import { useLastRecognizedIdentity } from '../../DataSource/useActivatedUI.js'
 import { ProfileBar, ProfileBarSkeleton } from './ProfileBar.js'
 
 const useStyles = makeStyles()((theme) => {
@@ -146,7 +146,7 @@ export function ProfileCardTitle({
                     {itsMe ?
                         <Web3ProfileSettingButton />
                     : !tipsDisabled ?
-                        <TipButton className={classes.tipButton} receiver={identity.identifier} />
+                        <TipsButton className={classes.tipButton} receiver={identity.identifier} />
                     :   null}
                 </div>
             </ProfileBar>

packages/mask/content-script/site-adaptors/mirror.xyz/injection/Tips/TipsButtonWrapper.tsx

@@ -1,5 +1,5 @@
 import { memo, useMemo, useState } from 'react'
-import { EMPTY_LIST, PluginID, type SocialAccount } from '@masknet/shared-base'
+import { EMPTY_LIST, EnhanceableSite, PluginID, type SocialAccount } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
 import type { Web3Helper } from '@masknet/web3-helpers'
 import { useNetworkContext, useWeb3Utils } from '@masknet/web3-hooks-base'
@@ -48,10 +48,7 @@ export const TipsButtonWrapper = memo(function TipsButtonWrapper({ slot }: Props
             {
                 pluginID,
                 address: visitingIdentity.identifier.userId,
-                label:
-                    visitingIdentity.nickname ?
-                        `(${visitingIdentity.nickname}) ${Utils.formatAddress(visitingIdentity.identifier.userId, 4)}`
-                    :   visitingIdentity.identifier.userId,
+                label: visitingIdentity.nickname || visitingIdentity.identifier.userId,
             },
         ]
     }, [visitingIdentity, Utils.formatAddress])
@@ -72,7 +69,13 @@ export const TipsButtonWrapper = memo(function TipsButtonWrapper({ slot }: Props
         )
     }, [visitingIdentity.identifier, accounts, slot])
 
-    if (disabled || !component || !visitingIdentity.identifier || isMinimalMode || location.pathname === '/')
+    if (
+        disabled ||
+        !component ||
+        !visitingIdentity.identifier ||
+        isMinimalMode ||
+        (location.hostname === EnhanceableSite.Mirror && location.pathname === '/') // exclude hostname like vitalik.mirror.xyz
+    )
         return null
 
     return (

packages/plugins/Tips/src/SiteAdaptor/components/TipsRealmContent/index.tsx

@@ -1,12 +1,12 @@
+import { Trans } from '@lingui/react/macro'
 import { Plugin } from '@masknet/plugin-infra'
 import { useLastRecognizedIdentity } from '@masknet/plugin-infra/content-script'
 import { PluginGuide } from '@masknet/shared'
 import { Sniffings, type EnhanceableSite } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
 import { Stack } from '@mui/material'
+import { TipsButton } from '../../../components/index.js'
 import { useTipsUserGuide } from '../../../storage/index.js'
-import { TipButton } from '../../../components/index.js'
-import { Trans } from '@lingui/react/macro'
 
 const useStyles = makeStyles<{ buttonSize: number }, 'postTipsButton'>()((theme, { buttonSize }, refs) => ({
     postButtonWrapper: {
@@ -84,7 +84,7 @@ export function TipsRealmContent({
     }
 
     const button = (
-        <TipButton
+        <TipsButton
             accounts={accounts}
             className={buttonClassMap[slot]}
             iconSize={iconSize}

packages/plugins/Tips/src/components/RecipientSection/RecipientSelect.tsx

@@ -1,9 +1,9 @@
-import { memo, useRef } from 'react'
+import { memo, useMemo, useRef } from 'react'
 import { Icons } from '@masknet/icons'
 import { makeStyles } from '@masknet/theme'
 import { AccountIcons, ReversedAddress } from '@masknet/shared'
 import { Link, MenuItem, Select, Typography } from '@mui/material'
-import { useDefaultChainId, useWeb3Utils } from '@masknet/web3-hooks-base'
+import { useDefaultChainId, useReverseAddresses, useWeb3Utils } from '@masknet/web3-hooks-base'
 import { isSameAddress } from '@masknet/web3-shared-base'
 import type { Web3Helper } from '@masknet/web3-helpers'
 import { NetworkPluginID, type SocialAccount } from '@masknet/shared-base'
@@ -17,14 +17,23 @@ const useStyles = makeStyles<void, 'icon' | 'pluginIcon' | 'text'>()((theme, _,
             flexGrow: 1,
         },
         menuItem: {
-            height: 32,
+            minHeight: 32,
             color: theme.palette.maskColor.main,
             borderRadius: theme.spacing(1),
-            padding: theme.spacing(0, 0.5),
+            padding: 6,
+            gap: theme.spacing(1),
             '&:not(:first-of-type)': {
                 marginTop: theme.spacing(1),
             },
         },
+        account: {},
+        address: {
+            fontSize: 14,
+            fontWeight: 400,
+            lineHeight: '18px',
+            display: 'flex',
+            alignItems: 'center',
+        },
         text: {
             fontWeight: 700,
             marginLeft: theme.spacing(0.5),
@@ -76,7 +85,7 @@ const useStyles = makeStyles<void, 'icon' | 'pluginIcon' | 'text'>()((theme, _,
     }
 })
 
-const PluginIcon = ({ pluginID }: { pluginID: NetworkPluginID }) => {
+const ChainRuntimeIcon = ({ runtime }: { runtime: NetworkPluginID }) => {
     const { classes } = useStyles()
     const mapping = {
         [NetworkPluginID.PLUGIN_EVM]: (
@@ -110,7 +119,7 @@ const PluginIcon = ({ pluginID }: { pluginID: NetworkPluginID }) => {
             />
         ),
     }
-    return mapping[pluginID]
+    return mapping[runtime]
 }
 
 function ExternalLink({ account }: { account: SocialAccount<Web3Helper.ChainIdAll> }) {
@@ -141,6 +150,11 @@ export const RecipientSelect = memo(({ className }: Props) => {
     const selectRef = useRef(null)
     const { recipient, recipients, setRecipient } = useTip()
     const recipientAddress = recipient?.address
+    const addresses = useMemo(() => {
+        return recipients.map((x) => ({ address: x.address, pluginID: x.pluginID }))
+    }, [recipients])
+
+    const queries = useReverseAddresses(addresses)
 
     return (
         <Select
@@ -166,11 +180,11 @@ export const RecipientSelect = memo(({ className }: Props) => {
                 BackdropProps: {
                     invisible: true,
                 },
-            }}>
-            {recipients.map((account) => (
-                <MenuItem className={classes.menuItem} key={account.address} value={account.address}>
-                    <PluginIcon pluginID={account.pluginID} />
-                    {account.label ?
+            }}
+            renderValue={(value) => {
+                const account = recipients.find((x) => isSameAddress(x.address, value))
+                if (!account) return null
+                return account.label ?
                         <Typography component="span" className={classes.text}>
                             {account.label}
                         </Typography>
@@ -180,14 +194,33 @@ export const RecipientSelect = memo(({ className }: Props) => {
                             component="span"
                             className={classes.text}
                         />
-                    }
-                    <ExternalLink account={account} />
-                    <AccountIcons socialAccount={account} classes={{ icon: classes.icon }} />
-                    {isSameAddress(account.address, recipientAddress) ?
-                        <Icons.CheckCircle className={cx(classes.checkIcon, classes.icon)} />
-                    :   null}
-                </MenuItem>
-            ))}
+            }}>
+            {recipients.map((account, index) => {
+                const selected = isSameAddress(account.address, recipientAddress)
+                const domain = queries[index].data
+                const label = account.label || domain
+
+                return (
+                    <MenuItem className={classes.menuItem} key={account.address} value={account.address}>
+                        <ChainRuntimeIcon runtime={account.pluginID} />
+                        <div className={classes.account}>
+                            {label ?
+                                <Typography component="span" className={classes.text}>
+                                    {account.label}
+                                </Typography>
+                            :   null}
+                            <Typography className={classes.address}>
+                                {account.address}
+                                <ExternalLink account={account} />
+                            </Typography>
+                        </div>
+                        <AccountIcons socialAccount={account} classes={{ icon: classes.icon }} />
+                        {selected ?
+                            <Icons.CheckCircle className={cx(classes.checkIcon, classes.icon)} />
+                        :   null}
+                    </MenuItem>
+                )
+            })}
         </Select>
     )
 })

packages/plugins/Tips/src/components/TipsButton/index.tsx

@@ -36,7 +36,7 @@ const useStyles = makeStyles()({
     },
 })
 
-export function TipButton(props: Props) {
+export function TipsButton(props: Props) {
     const {
         className,
         accounts: receivingAccounts = EMPTY_LIST,

packages/shared/src/UI/components/ReversedAddress/index.tsx

@@ -29,9 +29,7 @@ export const ReversedAddress = memo<ReverseAddressProps>(({ address, pluginID, s
     const popperProps = useBoundedPopperProps()
 
     useEffect(() => {
-        if (showDomain) {
-            onReverse?.(domain)
-        }
+        onReverse?.(domain ?? '')
     }, [showDomain, domain, onReverse])
 
     return hasEllipsis ?

packages/web3-hooks/base/src/useReverseAddress.ts

@@ -1,29 +1,46 @@
-import { skipToken, useQuery } from '@tanstack/react-query'
-import { NameServiceID, type NetworkPluginID } from '@masknet/shared-base'
-import { useWeb3State } from './useWeb3State.js'
-import { Lens } from '@masknet/web3-providers'
+import { NameServiceID, NetworkPluginID } from '@masknet/shared-base'
+import { useNetworkContext } from '@masknet/web3-hooks-base'
+import { getActivatedPluginWeb3State, Lens } from '@masknet/web3-providers'
+import { useQueries, useQuery } from '@tanstack/react-query'
 
 export function useReverseAddress<T extends NetworkPluginID>(
-    pluginID?: T,
+    expectedPluginID?: T,
     address?: string,
     domainOnly?: boolean,
     preferredType?: NameServiceID,
 ) {
-    const { NameService } = useWeb3State(pluginID)
-
+    const { pluginID } = useNetworkContext<T>(expectedPluginID)
     return useQuery({
-        queryKey: ['reverse', address, domainOnly, preferredType],
-        enabled: !!NameService?.reverse,
-        queryFn:
-            NameService ?
-                async () => {
-                    if (!address) return null
-                    if (preferredType === NameServiceID.Lens) {
-                        const result = await Lens.reverse?.(address)
-                        if (result) return result
-                    }
-                    return (await NameService?.reverse?.(address, domainOnly)) || null
+        queryKey: ['reverse', address, pluginID, domainOnly, preferredType],
+        queryFn: async () => {
+            const { NameService } = getActivatedPluginWeb3State(pluginID)
+            if (!address || !NameService) return null
+            if (preferredType === NameServiceID.Lens) {
+                const result = await Lens.reverse?.(address)
+                if (result) return result
+            }
+            return (await NameService?.reverse?.(address, domainOnly)) || null
+        },
+    })
+}
+
+export function useReverseAddresses<T extends NetworkPluginID>(
+    addresses: Array<{ address: string; pluginID: T }>,
+    domainOnly?: boolean,
+    preferredType?: NameServiceID,
+) {
+    return useQueries({
+        queries: addresses.map(({ address, pluginID }) => ({
+            queryKey: ['reverse', address, pluginID, domainOnly, preferredType],
+            queryFn: async () => {
+                const { NameService } = getActivatedPluginWeb3State(pluginID)
+                if (!address || !NameService) return null
+                if (preferredType === NameServiceID.Lens) {
+                    const result = await Lens.reverse?.(address)
+                    if (result) return result
                 }
-            :   skipToken,
+                return (await NameService?.reverse?.(address, domainOnly)) || null
+            },
+        })),
     })
 }