[Release] Hotfix 2.23.6 => 2.23.7 (patch) (#11036)

* chore: bump version to 2.23.7

* fix: mf-5560 twitter toolbar DOM gets updated (#11050)

* fix: color of some text on dark mode (#11045)

* fix: mf-5560 vertical center mask icon (#11051)

* fix: mf-5559 adjust tip button (#11052)

* fix: mf-5564 change avax explorer (#11056)

* fix: mf-5559 tip button in reply photo tweet (#11057)

* fix: mf-5565 adjust mask icon size (#11058)

---------

Co-authored-by: UncleBill <[email protected]>

package.json

@@ -8,7 +8,7 @@
     "yarn": ">=999.0.0",
     "npm": ">=999.0.0"
   },
-  "version": "2.23.6",
+  "version": "2.23.7",
   "private": true,
   "license": "AGPL-3.0-or-later",
   "scripts": {

packages/icons/icon-generated-as-jsx.js

@@ -2205,11 +2205,35 @@ export const LocalBackup = /*#__PURE__*/ __createIcon('LocalBackup', [
         u: () => new URL('./general/LocalBackup.png', import.meta.url),
     },
 ])
-export const Lock = /*#__PURE__*/ __createIcon('Lock', [
-    {
-        u: () => new URL('./general/Lock.svg', import.meta.url),
-    },
-])
+export const Lock = /*#__PURE__*/ __createIcon(
+    'Lock',
+    [
+        {
+            u: () => new URL('./general/Lock.svg', import.meta.url),
+            j: () =>
+                /*#__PURE__*/ _jsx('svg', {
+                    xmlns: 'http://www.w3.org/2000/svg',
+                    fill: 'none',
+                    viewBox: '0 0 24 25',
+                    children: /*#__PURE__*/ _jsxs('g', {
+                        fill: 'currentColor',
+                        fillRule: 'evenodd',
+                        clipRule: 'evenodd',
+                        children: [
+                            /*#__PURE__*/ _jsx('path', {
+                                d: 'M7.748 5.01c-.697.866-.948 2.132-.948 3.74v2a.8.8 0 0 1-1.6 0v-2c0-1.704.25-3.438 1.302-4.744C7.585 2.662 9.363 1.95 12 1.95s4.416.713 5.498 2.057C18.55 5.312 18.8 7.046 18.8 8.75v2a.8.8 0 0 1-1.6 0v-2c0-1.607-.25-2.873-.948-3.74-.667-.828-1.889-1.46-4.252-1.46s-3.584.632-4.252 1.46zM12 15.05a1.7 1.7 0 1 0 0 3.4 1.7 1.7 0 0 0 0-3.4zm-3.3 1.7a3.3 3.3 0 1 1 6.6 0 3.3 3.3 0 0 1-6.6 0z',
+                            }),
+                            /*#__PURE__*/ _jsx('path', {
+                                d: 'M3.566 12.315c-.496.495-.766 1.428-.766 3.434v2c0 2.006.27 2.939.766 3.434.495.496 1.428.766 3.434.766h10c2.006 0 2.939-.27 3.434-.766.496-.495.766-1.428.766-3.434v-2c0-2.006-.27-2.939-.765-3.434-.496-.496-1.43-.766-3.435-.766H7c-2.006 0-2.939.27-3.434.766zm-1.131-1.131C3.439 10.178 5.005 9.949 7 9.949h10c1.994 0 3.561.23 4.566 1.235 1.004 1.004 1.234 2.57 1.234 4.565v2c0 1.995-.23 3.562-1.234 4.566-1.005 1.004-2.572 1.234-4.566 1.234H7c-1.994 0-3.561-.23-4.565-1.234C1.43 21.31 1.2 19.743 1.2 17.749v-2c0-1.994.23-3.561 1.235-4.566z',
+                            }),
+                        ],
+                    }),
+                }),
+            s: true,
+        },
+    ],
+    [24, 25],
+)
 export const MaskAvatar = /*#__PURE__*/ __createIcon('MaskAvatar', [
     {
         c: ['dark'],

packages/mask/shared-ui/locales/en-US.json

@@ -261,7 +261,7 @@
     "export": "Export",
     "confirm_swap_risk": "Confirm swap risk",
     "wallet_load_retry": "Failed to load {{symbol}}. Click to retry.",
-    "wallet_name": "Wallet Name",
+    "name": "Name",
     "wallet_rename": "Rename Wallet",
     "wallet_loading_nft_contract": "Loading NFT contract...",
     "wallet_search_contract_no_result": "No results or contract address does not meet the query criteria.",
@@ -1157,7 +1157,7 @@
     "wallet_edit_contact_successfully": "Edit contact successfully.",
     "wallet_delete_contact": "Delete Contact",
     "wallet_delete_contact_successfully": "Delete contact successfully.",
-    "wallet_name_wallet": "Name your wallet",
+    "wallet_name": "Name your wallet",
     "wallet_account": "Wallet Account",
     "wallet_imported": "Imported",
     "scan_address_to_payment": "Scan QR code to receive payment",

packages/mask/src/components/InjectedComponents/PostDialogHint.tsx

@@ -22,7 +22,7 @@ export interface PostDialogHintUIProps extends withClasses<'buttonTransform' | '
 const useStyles = makeStyles()((theme) => ({
     button: {
         // TODO: is it correct? (what about twitter?)
-        padding: isMobileFacebook ? 0 : '7px',
+        padding: isMobileFacebook ? 0 : 'var(--icon-padding, 10px)',
     },
     text: {
         color: theme.palette.grey[300],
@@ -39,15 +39,23 @@ const useStyles = makeStyles()((theme) => ({
 
 const ICON_MAP: Record<string, JSX.Element> = {
     minds: <Icons.MaskInMinds size={18} />,
-    default: <Icons.SharpMask size={17} color={MaskColors.light.maskColor.publicTwitter} />,
+    default: (
+        <Icons.SharpMask
+            style={{
+                height: 'var(--icon-size, 17px)',
+                width: 'var(--icon-size, 17px)',
+            }}
+            color={MaskColors.light.maskColor.publicTwitter}
+        />
+    ),
 }
 
-const EntryIconButton = memo((props: PostDialogHintUIProps) => {
+const EntryIconButton = memo(function EntryIconButton(props: PostDialogHintUIProps) {
     const { t } = useI18N()
     const { tooltip, disableGuideTip } = props
     const { classes, cx } = useStyles(undefined, { props })
 
-    const getEntry = () => (
+    const Entry = (
         <ShadowRootTooltip
             title={t('mask_network')}
             placement={tooltip?.placement}
@@ -66,10 +74,10 @@ const EntryIconButton = memo((props: PostDialogHintUIProps) => {
     )
 
     return disableGuideTip ? (
-        getEntry()
+        Entry
     ) : (
         <GuideStep step={4} total={4} tip={t('user_guide_tip_4')} onComplete={props.onHintButtonClicked}>
-            {getEntry()}
+            {Entry}
         </GuideStep>
     )
 })

packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx

@@ -57,6 +57,7 @@ import Services from '#services'
 const useStyles = makeStyles()((theme) => ({
     root: {
         width: Sniffings.is_facebook_page ? 876 : 'auto',
+        color: theme.palette.maskColor.main,
     },
     container: {
         background:

packages/mask/src/extension/popups/modals/AddContactModal/index.tsx

@@ -97,7 +97,7 @@ function AddContactDrawer({ onConfirm, address, name, setName, setAddress, ...re
             <EmojiAvatar address={address} className={classes.emojiAvatar} sx={{ width: 60, height: 60 }} />
             <MaskTextField
                 spellCheck={false}
-                placeholder={t('wallet_name_wallet')}
+                placeholder={t('name')}
                 className={classes.input}
                 value={name}
                 onChange={(ev) => {

packages/mask/src/extension/popups/modals/EditContactModal/index.tsx

@@ -134,7 +134,7 @@ function EditContactDrawer({ onConfirm, address, name, setName, type, ...rest }:
                     inputProps={{ style: { textAlign: 'center' } }}
                     classes={{ root: classes.inputRoot }}
                     spellCheck={false}
-                    placeholder={t('wallet_name_wallet')}
+                    placeholder={t('name')}
                     className={classes.input}
                     value={name}
                     onChange={(ev) => {

packages/mask/src/extension/popups/pages/Settings/index.tsx

@@ -1,24 +1,24 @@
+import Services from '#services'
+import { env } from '@masknet/flags'
+import { Icons } from '@masknet/icons'
+import { Appearance, LanguageOptions } from '@masknet/public-api'
+import { DashboardRoutes, PopupModalRoutes, Sniffings } from '@masknet/shared-base'
+import { openWindow } from '@masknet/shared-base-ui'
+import { makeStyles } from '@masknet/theme'
+import { Box, List, ListItem, ListItemText, Typography, useTheme } from '@mui/material'
 import { memo, useCallback, useMemo } from 'react'
 import { Trans } from 'react-i18next'
-import { Box, List, ListItem, ListItemText, Typography, useTheme } from '@mui/material'
+import { UserContext, useAppearance, useLanguage } from '../../../../../shared-ui/index.js'
 import { useI18N } from '../../../../utils/i18n-next-ui.js'
-import { useTitle } from '../../hooks/useTitle.js'
-import { makeStyles } from '@masknet/theme'
-import { Icons } from '@masknet/icons'
 import { NormalHeader, useModalNavigate } from '../../components/index.js'
-import { env } from '@masknet/flags'
-import { UserContext, useAppearance, useLanguage } from '../../../../../shared-ui/index.js'
-import { Appearance, LanguageOptions } from '@masknet/public-api'
-import { openWindow } from '@masknet/shared-base-ui'
-import { DashboardRoutes, PopupModalRoutes, Sniffings } from '@masknet/shared-base'
 import { useSupportedSites } from '../../hooks/useSupportedSites.js'
-import Services from '#services'
+import { useTitle } from '../../hooks/useTitle.js'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
         padding: theme.spacing(2),
         flex: 1,
-        maxHeight: 474,
+        paddingBottom: 80,
         overflow: 'auto',
         display: 'flex',
         flexDirection: 'column',

packages/mask/src/site-adaptors/twitter.com/injection/PostDialogHint.tsx

@@ -1,16 +1,17 @@
-import { useCallback } from 'react'
-import { alpha } from '@mui/material'
-import { makeStyles, MaskColorVar } from '@masknet/theme'
-import { makeTypedMessageText } from '@masknet/typed-message'
 import { MutationObserverWatcher, type LiveSelector } from '@dimensiondev/holoflows-kit'
 import { CrossIsolationMessages, sayHelloShowed } from '@masknet/shared-base'
-import { isReplyPageSelector, postEditorInPopupSelector, searchReplyToolbarSelector } from '../utils/selector.js'
-import { startWatch, type WatchOptions } from '../../../utils/startWatch.js'
-import { attachReactTreeWithContainer } from '../../../utils/shadow-root/renderInShadowRoot.js'
+import { makeStyles, MaskColorVar } from '@masknet/theme'
+import { makeTypedMessageText } from '@masknet/typed-message'
+import { alpha } from '@mui/material'
+import { clamp } from 'lodash-es'
+import { useCallback } from 'react'
 import { PostDialogHint } from '../../../components/InjectedComponents/PostDialogHint.js'
-import { twitterBase } from '../base.js'
 import { useI18N } from '../../../utils/index.js'
+import { attachReactTreeWithContainer } from '../../../utils/shadow-root/renderInShadowRoot.js'
+import { startWatch, type WatchOptions } from '../../../utils/startWatch.js'
+import { twitterBase } from '../base.js'
 import { hasEditor, isCompose } from '../utils/postBox.js'
+import { isReplyPageSelector, postEditorInPopupSelector, searchReplyToolbarSelector } from '../utils/selector.js'
 
 const useStyles = makeStyles()((theme) => ({
     iconButton: {
@@ -48,13 +49,34 @@ export function injectPostDialogHintAtTwitter(signal: AbortSignal) {
     )
 }
 
-function renderPostDialogHintTo<T>(reason: 'timeline' | 'popup', ls: LiveSelector<T, true>, options: WatchOptions) {
+function renderPostDialogHintTo<T extends HTMLElement>(
+    reason: 'timeline' | 'popup',
+    ls: LiveSelector<T, true>,
+    options: WatchOptions,
+) {
     const watcher = new MutationObserverWatcher(ls)
     startWatch(watcher, options)
 
-    attachReactTreeWithContainer(watcher.firstDOMProxy.afterShadow, { signal: options.signal }).render(
-        <PostDialogHintAtTwitter reason={reason} />,
-    )
+    attachReactTreeWithContainer(watcher.firstDOMProxy.afterShadow, {
+        signal: options.signal,
+        tag: () => {
+            // Vertical center the button when font size of Twitter is set to `large` or `very large`
+            const tag = document.createElement('span')
+            Object.assign(tag.style, {
+                display: 'inline-flex',
+                alignItems: 'center',
+                height: '100%',
+            })
+            const svgIcon = document.querySelector('[data-testid="geoButton"] svg')
+            const size = svgIcon ? clamp(svgIcon.getBoundingClientRect().width, 18, 24) : undefined
+            const geoButton = document.querySelector('[data-testid="geoButton"]')
+            const padding = geoButton && size ? (geoButton.getBoundingClientRect().width - size) / 2 : undefined
+            if (padding) tag.style.setProperty('--icon-padding', `${padding}px`)
+            if (size) tag.style.setProperty('--icon-size', `${size}px`)
+
+            return tag
+        },
+    }).render(<PostDialogHintAtTwitter reason={reason} />)
 }
 
 function PostDialogHintAtTwitter({ reason }: { reason: 'timeline' | 'popup' }) {

packages/mask/src/site-adaptors/twitter.com/utils/selector.ts

@@ -90,7 +90,9 @@ export const postEditorContentInPopupSelector: () => LiveSelector<E, true> = ()
         '[aria-labelledby="modal-header"] > div:first-child > div:first-child > div:first-child > div:nth-child(3)',
     )
 export const postEditorInPopupSelector: () => LiveSelector<E, true> = () =>
-    querySelector<E>('[aria-labelledby="modal-header"]  div[data-testid="toolBar"] div[data-testid="geoButton"]')
+    querySelector<E>(
+        '[aria-labelledby="modal-header"]  div[data-testid="toolBar"] [role="presentation"]:has(> div[data-testid="geoButton"])',
+    )
 export const sideBarProfileSelector: () => LiveSelector<E, true> = () =>
     querySelector<E>('[role="banner"] [role="navigation"] [data-testid="AppTabBar_Profile_Link"] > div')
 export const postEditorInTimelineSelector: () => LiveSelector<E, true> = () =>
@@ -163,8 +165,8 @@ export const postsContentSelector = () =>
     querySelectorAll(
         [
             // tweets on timeline page
-            '[data-testid="tweet"] div + div div[lang]',
-            '[data-testid="tweet"] div + div div[data-testid="card.wrapper"]',
+            '[data-testid="tweet"] [data-testid="tweetText"]',
+            '[data-testid="tweet"]:not(:has([data-testid="tweetText"])) [data-testid="tweetPhoto"]', // tweets with only image.
 
             // tweets on detailed page
             '[data-testid="tweet"] + div > div:first-child div[lang]',
@@ -174,9 +176,6 @@ export const postsContentSelector = () =>
             '[data-testid="tweet"] [aria-labelledby] div[role="link"] div[lang]',
             // quoted tweets in detail page
             '[data-testid="tweet"] > div:last-child div[role="link"] div[lang]',
-
-            // reply-tweets
-            '[data-testid="tweet"] + div div div[lang][dir]',
         ].join(','),
     )
 
@@ -279,7 +278,7 @@ export const searchTwitterAvatarNFTLinkSelector = () => querySelector<E>('a[href
 
 export const searchReplyToolbarSelector = () =>
     querySelector<E>('div[data-testid="primaryColumn"] div[data-testid="toolBar"]').querySelector<E>(
-        'div[data-testid="geoButton"]',
+        '[role="presentation"]:has(> div[data-testid="geoButton"])',
     )
 
 // nameTag dom

packages/plugins/NextID/src/components/Actions/index.tsx

@@ -1,6 +1,6 @@
 import { memo } from 'react'
 import { makeStyles } from '@masknet/theme'
-import { Button, Stack, Typography } from '@mui/material'
+import { Button, Stack, Typography, useTheme } from '@mui/material'
 import { Icons } from '@masknet/icons'
 import { useI18N } from '../../locales/index.js'
 import { PersonaSelectPanel } from '@masknet/shared'
@@ -64,11 +64,11 @@ interface AddWalletPersonaActionProps {
 
 export const AddWalletPersonaAction = memo<AddWalletPersonaActionProps>(({ onAddWallet }) => {
     const t = useI18N()
-    const { classes } = useStyles()
+    const { classes, theme } = useStyles()
     return (
         <>
             <Stack flex={1} px={1.25} justifyContent="flex-start" width="100%" boxSizing="border-box">
-                <Typography fontWeight={400} fontSize={14}>
+                <Typography fontWeight={400} fontSize={14} color={theme.palette.maskColor.second}>
                     {t.add_wallet_intro()}
                 </Typography>
             </Stack>
@@ -84,9 +84,10 @@ export const AddWalletPersonaAction = memo<AddWalletPersonaActionProps>(({ onAdd
 
 export const OtherLackWalletAction = memo(() => {
     const t = useI18N()
+    const theme = useTheme()
     return (
         <Stack justifyContent="center" alignItems="center" flex={1}>
-            <Typography fontWeight={400} fontSize={14}>
+            <Typography fontWeight={400} fontSize={14} color={theme.palette.maskColor.second}>
                 {t.others_lack_wallet()}
             </Typography>
         </Stack>

packages/plugins/NextID/src/components/NextIdPage.tsx

@@ -82,11 +82,11 @@ export const NextIdPage = memo(function NextIdPage() {
 
     return (
         <>
-            <PluginCardFrameMini>
-                <ThemeProvider theme={MaskLightTheme}>
+            <ThemeProvider theme={MaskLightTheme}>
+                <PluginCardFrameMini>
                     <PluginEnableBoundary pluginID={PluginID.Web3Profile}>{ActionComponent}</PluginEnableBoundary>
-                </ThemeProvider>
-            </PluginCardFrameMini>
+                </PluginCardFrameMini>
+            </ThemeProvider>
             {openBindDialog && currentPersona && isOwn ? (
                 <BindDialog
                     open={openBindDialog}