feat: mf-6335 refine nft detail dialog (#11863)

* feat: mf-6335 refine nft detail dialog

* fix(Lens): mf-6417 handle overflow

packages/plugins/Collectible/src/SiteAdaptor/Card/tabs/AboutTab.tsx

@@ -7,6 +7,7 @@ import { CollectibleCard } from '../CollectibleCard.js'
 import { FigureCard } from '../../Shared/FigureCard.js'
 import { PriceCard } from '../../Shared/PriceCard.js'
 import { Context } from '../../Context/index.js'
+import { useMemo } from 'react'
 
 const useStyles = makeStyles<{ hidePriceCard: boolean }>()((theme, { hidePriceCard }) => ({
     body: {
@@ -21,8 +22,8 @@ const useStyles = makeStyles<{ hidePriceCard: boolean }>()((theme, { hidePriceCa
     },
 }))
 
-const resolveTopListing = (orders?: Array<NonFungibleTokenOrder<Web3Helper.ChainIdAll, Web3Helper.SchemaTypeAll>>) => {
-    if (!orders?.length) return
+const resolveTopListing = (orders: Array<NonFungibleTokenOrder<Web3Helper.ChainIdAll, Web3Helper.SchemaTypeAll>>) => {
+    if (!orders.length) return
     return first(
         orders.sort((a, b) => {
             const value_a = new BigNumber(a.priceInToken?.amount ?? 0)
@@ -40,7 +41,7 @@ interface AboutTabProps {
 export function AboutTab(props: AboutTabProps) {
     const { asset, isLoading } = props
     const { orders, offers, sourceType } = Context.useContainer()
-    const topListing = resolveTopListing(offers)
+    const topListing = useMemo(() => resolveTopListing(offers), [offers])
     const hidePriceCard = !topListing && Boolean(orders.error) && !sourceType
     const { classes } = useStyles({ hidePriceCard })
 

packages/plugins/Collectible/src/SiteAdaptor/CardDialog/CardDialog.tsx

@@ -33,7 +33,7 @@ export function CardDialog(props: CardDialogProps) {
     const { classes } = useStyles()
     const { chainId, pluginID, tokenId, tokenAddress } = Context.useContainer()
 
-    const [currentTab, onChange] = useTabs<TabType>(TabType.About, TabType.Offers, TabType.Activities)
+    const [currentTab, onChange] = useTabs(TabType.About, TabType.Activities)
 
     if (!chainId || !pluginID) return null
 
@@ -55,7 +55,6 @@ export function CardDialog(props: CardDialogProps) {
                 <TabContext value={currentTab}>
                     <MaskTabList variant="base" onChange={onChange} aria-label="NFTCard">
                         <Tab label={t.plugin_collectible_about()} value={TabType.About} />
-                        <Tab label={t.plugin_collectible_offers()} value={TabType.Offers} />
                         <Tab label={t.plugin_collectible_activities()} value={TabType.Activities} />
                     </MaskTabList>
                 </TabContext>

packages/plugins/Collectible/src/SiteAdaptor/CardDialog/CardDialogContent.tsx

@@ -1,13 +1,12 @@
 import { useCallback } from 'react'
 import { openWindow } from '@masknet/shared-base-ui'
 import { useSubscription } from 'use-subscription'
-import { Button } from '@mui/material'
+import { alpha, Button } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { Icons } from '@masknet/icons'
-import { ConnectPersonaBoundary, LoadingStatus, PluginWalletStatusBar, ReloadStatus } from '@masknet/shared'
+import { ConnectPersonaBoundary, LoadingStatus, ReloadStatus } from '@masknet/shared'
 import { PluginID, NetworkPluginID, CrossIsolationMessages } from '@masknet/shared-base'
 import { SourceType, resolveSourceTypeName } from '@masknet/web3-shared-base'
-import { Web3ContextProvider } from '@masknet/web3-hooks-base'
 import {
     useAllPersonas,
     useCurrentVisitingIdentity,
@@ -33,13 +32,15 @@ const useStyles = makeStyles<{ listItemBackground?: string; listItemBackgroundIc
         },
         mediaBox: {
             width: 300,
+            flexShrink: 0,
         },
         contentLayout: {
             width: '100%',
             height: '100%',
             display: 'flex',
             padding: 24,
             boxSizing: 'border-box',
+            gap: theme.spacing(4),
             paddingBottom: 72,
             overflow: 'auto',
             scrollbarWidth: 'none',
@@ -48,21 +49,30 @@ const useStyles = makeStyles<{ listItemBackground?: string; listItemBackgroundIc
             },
         },
         tabWrapper: {
-            width: 'calc(100% - 336px)',
-            marginLeft: 36,
             overflowY: 'auto',
             scrollbarWidth: 'none',
+            flexGrow: 1,
             '&::-webkit-scrollbar': {
                 display: 'none',
             },
         },
         footer: {
+            position: 'sticky',
+            bottom: 0,
+            boxSizing: 'content-box',
+            display: 'flex',
+            backgroundColor: alpha(theme.palette.maskColor.bottom, 0.8),
             boxShadow:
                 theme.palette.mode === 'dark' ?
                     '0px 0px 20px rgba(255, 255, 255, 0.12)'
                 :   '0px 0px 20px rgba(0, 0, 0, 0.05)',
-            position: 'sticky',
-            bottom: 0,
+            backdropFilter: 'blur(16px)',
+            padding: theme.spacing(2),
+            borderRadius: '0 0 12px 12px',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            flex: 1,
+            maxHeight: 40,
         },
         buttonText: {
             marginLeft: theme.spacing(1),
@@ -81,15 +91,7 @@ export function CardDialogContent(props: CardDialogContentProps) {
     const { currentTab } = props
     const { classes } = useStyles()
     const t = useCollectibleTrans()
-    const {
-        asset,
-        orders,
-        offers,
-        origin,
-        parentPluginID = NetworkPluginID.PLUGIN_EVM,
-        pluginID,
-        chainId,
-    } = Context.useContainer()
+    const { asset, orders, offers, origin, pluginID } = Context.useContainer()
     const currentVisitingIdentity = useCurrentVisitingIdentity()
     const lastRecognized = useLastRecognizedIdentity()
     const currentIdentifier = useSubscription(currentPersonaIdentifier)
@@ -141,48 +143,48 @@ export function CardDialogContent(props: CardDialogContentProps) {
                 </div>
             </div>
 
-            <Web3ContextProvider network={parentPluginID}>
-                <PluginWalletStatusBar className={classes.footer} expectedPluginID={pluginID} expectedChainId={chainId}>
-                    {origin === 'pfp' && currentVisitingIdentity?.isOwner ?
-                        <ConnectPersonaBoundary
-                            personas={personas}
-                            identity={lastRecognized}
-                            currentPersonaIdentifier={currentIdentifier}
-                            openDashboard={openDashboard}
-                            handlerPosition="top-right"
-                            customHint
-                            directTo={PluginID.Avatar}
-                            beforeAction={onBeforeAction}>
-                            <Button
-                                sx={{ display: 'flex', alignItems: 'center' }}
-                                variant="contained"
-                                size="medium"
-                                onClick={onPFPButtonClick}
-                                fullWidth>
-                                <Icons.Avatar size={20} />
-                                <span className={classes.buttonText}>{t.plugin_collectibles_pfp_button()}</span>
-                            </Button>
-                        </ConnectPersonaBoundary>
-                    : externalLink ?
+            {origin === 'pfp' && currentVisitingIdentity?.isOwner ?
+                <div className={classes.footer}>
+                    <ConnectPersonaBoundary
+                        personas={personas}
+                        identity={lastRecognized}
+                        currentPersonaIdentifier={currentIdentifier}
+                        openDashboard={openDashboard}
+                        handlerPosition="top-right"
+                        customHint
+                        directTo={PluginID.Avatar}
+                        beforeAction={onBeforeAction}>
                         <Button
                             sx={{ display: 'flex', alignItems: 'center' }}
                             variant="contained"
                             size="medium"
-                            onClick={onMoreButtonClick}
+                            onClick={onPFPButtonClick}
                             fullWidth>
-                            <span className={classes.buttonText}>
-                                {t.plugin_collectibles_more_on_button({
-                                    provider:
-                                        asset.data.source === SourceType.NFTScan ?
-                                            resolveSourceTypeName(asset.data.source)
-                                        :   'platform',
-                                })}
-                            </span>
-                            <Icons.LinkOut size={16} />
+                            <Icons.Avatar size={20} />
+                            <span className={classes.buttonText}>{t.plugin_collectibles_pfp_button()}</span>
                         </Button>
-                    :   <div />}
-                </PluginWalletStatusBar>
-            </Web3ContextProvider>
+                    </ConnectPersonaBoundary>
+                </div>
+            : externalLink ?
+                <div className={classes.footer}>
+                    <Button
+                        sx={{ display: 'flex', alignItems: 'center' }}
+                        variant="contained"
+                        size="medium"
+                        onClick={onMoreButtonClick}
+                        fullWidth>
+                        <span className={classes.buttonText}>
+                            {t.plugin_collectibles_more_on_button({
+                                provider:
+                                    asset.data.source === SourceType.NFTScan ?
+                                        resolveSourceTypeName(asset.data.source)
+                                    :   'platform',
+                            })}
+                        </span>
+                        <Icons.LinkOut size={16} />
+                    </Button>
+                </div>
+            :   null}
         </div>
     )
 }

packages/plugins/Collectible/src/SiteAdaptor/Shared/ActivitiesList.tsx

@@ -37,11 +37,11 @@ export function ActivitiesList() {
         },
     )
     const events = useMemo(() => data?.pages.flatMap((x) => x.data) ?? EMPTY_LIST, [data?.pages])
-    if (isPending && !events.length) return <LoadingStatus className={classes.wrapper} />
+    if (isPending && !events.length) return <LoadingStatus height="100%" />
 
-    if (error) return <ReloadStatus className={classes.wrapper} onRetry={refetch} />
+    if (error) return <ReloadStatus height="100%" onRetry={refetch} />
 
-    if (!events.length) return <EmptyStatus height={215}>{t.plugin_collectible_nft_activity_empty()}</EmptyStatus>
+    if (!events.length) return <EmptyStatus height="100%">{t.plugin_collectible_nft_activity_empty()}</EmptyStatus>
 
     return (
         <div className={classes.wrapper} style={{ justifyContent: 'unset' }}>

packages/plugins/Collectible/src/SiteAdaptor/Shared/PriceCard.tsx

@@ -55,8 +55,7 @@ interface PriceCardProps {
     topListing?: NonFungibleTokenOrder<Web3Helper.ChainIdAll, Web3Helper.SchemaTypeAll>
 }
 
-export function PriceCard(props: PriceCardProps) {
-    const { topListing } = props
+export function PriceCard({ topListing }: PriceCardProps) {
     const { setSourceType, sourceType = topListing?.source, orders } = Context.useContainer()
     const t = useCollectibleTrans()
     const { classes } = useStyles()

packages/plugins/Web3Profile/src/SiteAdaptor/components/Lens/HandlerDescription.tsx

@@ -1,6 +1,6 @@
 import { memo, useMemo, useState } from 'react'
 import { Box, Button, Typography } from '@mui/material'
-import { makeStyles } from '@masknet/theme'
+import { makeStyles, ShadowRootTooltip, TextOverflowTooltip } from '@masknet/theme'
 import { WalletIcon, SelectProviderModal } from '@masknet/shared'
 import {
     useChainContext,
@@ -30,12 +30,16 @@ const useStyles = makeStyles()((theme) => ({
     description: {
         display: 'flex',
         columnGap: 4,
+        minWidth: 0,
     },
     name: {
         fontWeight: 700,
         fontSize: 14,
         lineHeight: '18px',
         color: theme.palette.maskColor.main,
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
     },
     address: {
         fontWeight: 700,
@@ -55,7 +59,12 @@ interface HandlerDescriptionProps extends withClasses<'container'> {
     onChange: (profile: LensBaseAPI.Profile) => void
 }
 
-export const HandlerDescription = memo<HandlerDescriptionProps>(({ profiles, currentProfile, onChange, ...props }) => {
+export const HandlerDescription = memo<HandlerDescriptionProps>(function HandlerDescription({
+    profiles,
+    currentProfile,
+    onChange,
+    ...props
+}) {
     const t = useWeb3ProfileTrans()
     const { classes } = useStyles(undefined, { props })
     const { pluginID } = useNetworkContext()
@@ -98,15 +107,15 @@ export const HandlerDescription = memo<HandlerDescriptionProps>(({ profiles, cur
         )
     }
     const avatar = getProfileAvatar(currentProfile) || new URL('../../assets/Lens.png', import.meta.url).href
-
+    const displayName = currentProfile.metadata?.displayName ?? currentProfile.handle.localName
     return (
         <Box className={classes.container}>
             <Box className={classes.description}>
                 <WalletIcon classes={{ mainIcon: classes.avatar }} size={36} mainIcon={avatar} />
-                <Box>
-                    <Typography className={classes.name}>
-                        {currentProfile.metadata?.displayName ?? currentProfile.handle.localName}
-                    </Typography>
+                <Box minWidth={0}>
+                    <TextOverflowTooltip as={ShadowRootTooltip} placement="top" title={displayName}>
+                        <Typography className={classes.name}>{displayName}</Typography>
+                    </TextOverflowTooltip>
                     <Typography className={classes.address}>{Utils.formatAddress(account, 4)}</Typography>
                 </Box>
             </Box>

packages/plugins/Web3Profile/src/SiteAdaptor/components/ProfilePopup.tsx

@@ -43,6 +43,10 @@ const useStyles = makeStyles()((theme) => ({
         color: theme.palette.maskColor.main,
         fontWeight: 700,
         lineHeight: '18px',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        paddingRight: 50,
     },
     second: {
         display: 'flex',