fix: nft detail ui (#10585)

* fix: nft detail ui * fix: mf-5108 popup nft tooltip (#10543) * fix: mf-5108 popup nft tooltip * fix: mf-5108 popup nft tooltip
DimensionDev · Aug 23, 2023 · de77645 · de77645
1 parent fbff7db
commit de77645
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 5 deletions.
diff --git a/packages/mask/src/extension/popups/pages/Wallet/CollectibleDetail/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/CollectibleDetail/index.tsx
@@ -118,6 +118,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     traitValue: {
         fontSize: 13,
+        fontWeight: 700,
         color: theme.palette.maskColor.primary,
         marginTop: theme.spacing(0.5),
         overflow: 'hidden',

diff --git a/packages/plugins/Trader/src/SiteAdaptor/trending/TickersTable.tsx b/packages/plugins/Trader/src/SiteAdaptor/trending/TickersTable.tsx
@@ -135,7 +135,9 @@ export function TickersTable({ tickers }: TickersTableProps) {
                     </ShadowRootTooltip>
                 )
             })(),
-            price: price ? <FormattedCurrency value={price} formatter={formatCurrency} /> : null,
+            price: price ? (
+                <FormattedCurrency value={price} formatter={formatCurrency} sign={CurrencyType.USD} />
+            ) : null,
         }
 
         const cells = Object.entries(pick(cellMap, columns)).map(([name, cell]) => (

diff --git a/packages/shared/src/UI/components/AssetsManagement/CollectibleItem.tsx b/packages/shared/src/UI/components/AssetsManagement/CollectibleItem.tsx
@@ -1,4 +1,4 @@
-import { ShadowRootTooltip, makeStyles, useDetectOverflow } from '@masknet/theme'
+import { ShadowRootTooltip, makeStyles, useBoundedPopperProps, useDetectOverflow } from '@masknet/theme'
 import { isLens, isLensCollect, isLensFollower, isXnsContractAddress } from '@masknet/web3-shared-evm'
 import { Button, Skeleton, Typography } from '@mui/material'
 import { forwardRef, memo, useCallback, useMemo, type HTMLProps } from 'react'
@@ -129,7 +129,7 @@ export const CollectibleItem = memo(
         const t = useSharedI18N()
         const { classes, cx } = useStyles()
         const name = asset.collection?.name ?? ''
-
+        const popperProps = useBoundedPopperProps()
         const handleClick = useCallback(() => {
             onItemClick?.(asset)
         }, [onItemClick, asset])
@@ -154,7 +154,7 @@ export const CollectibleItem = memo(
             ) : undefined
 
         return (
-            <ShadowRootTooltip title={tooltip} placement="top" disableInteractive arrow>
+            <ShadowRootTooltip PopperProps={popperProps} title={tooltip} placement="top" disableInteractive arrow>
                 <div
                     className={cx(classes.card, classes.fadeIn, className, disableAction ? null : classes.withAction)}
                     {...rest}

diff --git a/packages/shared/src/UI/components/AssetsManagement/Collection.tsx b/packages/shared/src/UI/components/AssetsManagement/Collection.tsx
@@ -1,7 +1,7 @@
 import { Icons } from '@masknet/icons'
 import { EMPTY_LIST, type NetworkPluginID } from '@masknet/shared-base'
 import { useEverSeen } from '@masknet/shared-base-ui'
-import { ShadowRootTooltip, makeStyles, useDetectOverflow } from '@masknet/theme'
+import { ShadowRootTooltip, makeStyles, useBoundedPopperProps, useDetectOverflow } from '@masknet/theme'
 import type { Web3Helper } from '@masknet/web3-helpers'
 import { Skeleton, Typography, useForkRef } from '@mui/material'
 import { range } from 'lodash-es'
@@ -115,6 +115,7 @@ export const Collection = memo(
     }: CollectionProps) => {
         const t = useSharedI18N()
         const { compact, containerRef } = useCompactDetection()
+        const popperProps = useBoundedPopperProps()
         const { classes, cx } = useStyles({ compact })
 
         useLayoutEffect(() => {
@@ -166,6 +167,7 @@ export const Collection = memo(
         ))
         return (
             <ShadowRootTooltip
+                PopperProps={popperProps}
                 title={nameOverflow ? collection.name : undefined}
                 placement="top"
                 disableInteractive