diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/CoinMetadataTable.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/CoinMetadataTable.tsx
index 7e1b54f690c..7616fc29aa8 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/CoinMetadataTable.tsx
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/CoinMetadataTable.tsx
@@ -20,6 +20,8 @@ import { ContractSection } from './ContractSection.js'
import type { CommunityType } from '../../types/index.js'
import { NetworkPluginID } from '@masknet/shared-base'
import { ContractItem } from './ContractItem.js'
+import { useEffect } from 'react'
+import { useWindowScroll } from 'react-use'
const useStyles = makeStyles()((theme) => ({
container: {
@@ -63,6 +65,11 @@ const useStyles = makeStyles()((theme) => ({
'&::-webkit-scrollbar': {
display: 'none',
},
+ background: theme.palette.maskColor.bottom,
+ boxShadow:
+ theme.palette.mode === 'dark'
+ ? '0px 4px 30px rgba(255, 255, 255, 0.15)'
+ : '0px 4px 30px rgba(0, 0, 0, 0.1)',
},
}))
@@ -88,6 +95,7 @@ export function CoinMetadataTable(props: CoinMetadataTableProps) {
const { trending } = props
const { t } = useI18N()
const { classes } = useStyles()
+ const position = useWindowScroll()
const metadataLinks = [[t('plugin_trader_website'), trending.coin.home_urls]] as Array<
[string, string[] | undefined]
@@ -101,7 +109,7 @@ export function CoinMetadataTable(props: CoinMetadataTableProps) {
},
]
- const [menu, openMenu] = useMenuConfig(
+ const [menu, openMenu, closeMenu] = useMenuConfig(
contracts.map((x) => (
)),
{
+ anchorSibling: false,
anchorOrigin: {
vertical: 'bottom',
horizontal: 'center',
@@ -124,6 +133,8 @@ export function CoinMetadataTable(props: CoinMetadataTableProps) {
},
)
+ useEffect(() => closeMenu(), [position])
+
return (