fix: toolbar ui (#9506)

* fix: toolbar ui * fix: reply review * refactor: naming --------- Co-authored-by: guanbinrui <guanbinrui@mask.io>
DimensionDev · May 5, 2023 · ce75bf7 · ce75bf7
1 parent 71a944c
commit ce75bf7
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 14 deletions.
diff --git a/packages/mask/src/social-network-adaptor/twitter.com/injection/ToolboxHint_UI.tsx b/packages/mask/src/social-network-adaptor/twitter.com/injection/ToolboxHint_UI.tsx
@@ -1,14 +1,15 @@
 import { ToolboxHintUnstyled } from '../../../components/InjectedComponents/ToolboxUnstyled.js'
 import { useSideBarNativeItemStyleVariants } from './ToolboxHint.js'
-import { styled, ListItemButton, Typography, ListItemIcon, Box } from '@mui/material'
+import { styled, ListItemButton, Typography, ListItemIcon, Box, useMediaQuery } from '@mui/material'
 import GuideStep from '../../../components/GuideStep/index.js'
 import { useI18N } from '../../../utils/index.js'
 import { useThemeSettings } from '../../../components/DataSource/useActivatedUI.js'
 import { ButtonStyle } from '../constant.js'
 import { useEffect, useMemo, useState } from 'react'
-import { MutationObserverWatcher } from '@dimensiondev/holoflows-kit'
 import { searchHomeLinkName } from '../utils/selector.js'
 
+const TWITTER_BREAKPOINT = 1265
+
 const Container = styled('div')`
     cursor: pointer;
     padding: 4px 0;
@@ -20,6 +21,10 @@ const ListItem = styled(ListItemButton)`
         background: rgba(15, 20, 25, 0.1);
         ${({ theme }) => (theme.palette.mode === 'dark' ? 'background: rgba(217, 217, 217, 0.1);' : '')}
     }
+    /* twitter break point */
+    @media screen and (max-width: ${TWITTER_BREAKPOINT}px) {
+        height: 50px;
+    }
 `
 const Text = styled(Typography)`
     margin-right: 16px;
@@ -44,20 +49,21 @@ export function ToolboxHintAtTwitter(props: { category: 'wallet' | 'application'
             </Text>
         )
     }, [buttonStyle.iconSize, textMarginLeft])
-
-    const [mini, setMini] = useState(false)
+    const _mini = useMediaQuery(`(max-width: ${TWITTER_BREAKPOINT}px)`)
+    const [mini, setMini] = useState(_mini)
 
     useEffect(() => {
-        const abortController = new AbortController()
-        const watch = new MutationObserverWatcher(searchHomeLinkName()).startWatch(
-            { childList: true, subtree: true },
-            abortController.signal,
-        )
-        watch.addListener('onAdd', () => setMini(false), { signal: abortController.signal })
-        watch.addListener('onRemove', () => setMini(true), { signal: abortController.signal })
+        const observer = new MutationObserver((mutations) => {
+            setMini(!searchHomeLinkName().querySelector('span').evaluate())
+        })
+
+        observer.observe(searchHomeLinkName().evaluate()!, {
+            subtree: true,
+            childList: true,
+        })
 
-        return () => abortController.abort()
-    })
+        return () => observer.disconnect()
+    }, [])
 
     const ListItemButton = useMemo(() => {
         return (

diff --git a/packages/mask/src/social-network-adaptor/twitter.com/utils/selector.ts b/packages/mask/src/social-network-adaptor/twitter.com/utils/selector.ts
@@ -293,4 +293,4 @@ export const searchReplyToolbarSelector = () =>
 // nameTag dom
 export const searchNameTag = () => querySelector<E>('#nft-gallery')
 
-export const searchHomeLinkName = () => querySelector<E>('[data-testid="AppTabBar_Home_Link"] span')
+export const searchHomeLinkName = () => querySelector<E>('[data-testid="AppTabBar_Home_Link"]')