fix: mf-5094 update texts in encrypt contacts (#10505)

DimensionDev · Aug 20, 2023 · d8a0268 · d8a0268
1 parent f42c45a
commit d8a0268
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 27 deletions.
diff --git a/packages/mask/shared-ui/locales/en-US.json b/packages/mask/shared-ui/locales/en-US.json
@@ -1058,9 +1058,9 @@
     "popups_verify_wallet_congratulation_tips": "Connecting {{persona}} with {{wallet}} successfully.",
     "popups_switch_Wallet": "Switch Wallet",
     "popups_encrypted_friends": "Encrypted Contacts",
-    "popups_encrypted_friends_search_placeholder": "Search Next.ID, Twitter, lens, ENS or Address",
+    "popups_encrypted_friends_search_placeholder": "Search Next.ID, Twitter, Lens, ENS or Address",
     "popups_encrypted_friends_search_no_result": "No search results",
-    "popups_encrypted_friends_no_friends": "No encrypted friends, you can try searching.",
+    "popups_encrypted_friends_no_friends": "No encrypted contacts, you can try searching.",
     "popups_encrypted_friends_add_friends": "Add",
     "popups_encrypted_friends_no_associated_accounts": "No associated accounts",
     "popups_select_wallet": "Select Wallet",

diff --git a/packages/mask/src/extension/popups/components/NormalHeader/index.tsx b/packages/mask/src/extension/popups/components/NormalHeader/index.tsx
@@ -1,7 +1,7 @@
 // ! This file is used during SSR. DO NOT import new files that does not work in SSR
 
 import { memo, useCallback, useContext, type ReactNode } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, useOutletContext } from 'react-router-dom'
 import { Box, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { Icons } from '@masknet/icons'
@@ -36,6 +36,7 @@ const useStyles = makeStyles()((theme) => ({
         overflow: 'hidden',
         paddingLeft: theme.spacing(1),
         paddingRight: theme.spacing(1),
+        gridArea: '1 / 2',
     },
     logo: {
         width: 96,
@@ -44,7 +45,6 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 interface NormalHeaderProps {
-    onlyTitle?: boolean
     tabList?: ReactNode
     onClose?: () => void
 }
@@ -56,33 +56,29 @@ function canNavBack() {
     return false
 }
 export const NormalHeader = memo<NormalHeaderProps>(function NormalHeader(props) {
-    const { onlyTitle, onClose, tabList } = props
-    const { cx, classes } = useStyles()
+    const { onClose, tabList } = props
+    const { classes } = useStyles()
     const navigate = useNavigate()
     const { title, extension, customBackHandler } = useContext(PageTitleContext)
 
     const canBack = canNavBack()
     const showTitle = title !== undefined
 
     const handleBack = useCallback(() => navigate(-1), [])
+    const { hasNavigator } = useOutletContext() as { hasNavigator: boolean }
 
-    if (onlyTitle)
-        return (
-            <Box className={cx(classes.container, classes.header)} style={{ justifyContent: 'center' }}>
-                <Typography className={classes.title}>{title}</Typography>
-            </Box>
-        )
+    const leftAction = hasNavigator ? null : canBack ? (
+        <Icons.Comeback className={classes.icon} onClick={customBackHandler ?? handleBack} />
+    ) : (
+        <Icons.Close className={classes.icon} onClick={onClose} />
+    )
 
     return (
         <Box className={classes.container}>
             <Box className={classes.header}>
                 {showTitle ? (
                     <>
-                        {canBack ? (
-                            <Icons.Comeback className={classes.icon} onClick={customBackHandler ?? handleBack} />
-                        ) : (
-                            <Icons.Close className={classes.icon} onClick={onClose} />
-                        )}
+                        {leftAction}
                         <Typography className={classes.title}>{title}</Typography>
                         {extension}
                     </>

diff --git a/packages/mask/src/extension/popups/components/PopupLayout/index.tsx b/packages/mask/src/extension/popups/components/PopupLayout/index.tsx
@@ -3,7 +3,7 @@
 import { PopupRoutes } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
 import { GlobalStyles, Paper } from '@mui/material'
-import { memo, type PropsWithChildren } from 'react'
+import { memo, useMemo, type PropsWithChildren } from 'react'
 import { matchPath, Outlet, useLocation } from 'react-router-dom'
 import { Navigator } from '../Navigator/index.js'
 
@@ -64,14 +64,15 @@ export const PopupLayout = memo(function PopupLayout({ children }: PropsWithChil
 
     const location = useLocation()
     const matched = PATTERNS.some((pattern) => matchPath(pattern, location.pathname))
+    const outletContext = useMemo(() => ({ hasNavigator: matched }), [matched])
 
     return (
         <>
             {GlobalCss}
             <Paper elevation={0} style={{ height: '100vh', overflowY: 'auto', minHeight: 600, borderRadius: 0 }}>
                 <div className={classes.container}>
                     <div className={classes.body} data-hide-scrollbar>
-                        {children ?? <Outlet />}
+                        {children ?? <Outlet context={outletContext} />}
                     </div>
                     {matched ? <Navigator className={classes.navigator} /> : null}
                 </div>

diff --git a/packages/mask/src/extension/popups/pages/Friends/Contacts/index.tsx b/packages/mask/src/extension/popups/pages/Friends/Contacts/index.tsx
@@ -1,11 +1,11 @@
+import { ElementAnchor, EmptyStatus } from '@masknet/shared'
+import { EMPTY_LIST, type BindingProof } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
-import { memo } from 'react'
-import { ContactCard } from '../ContactCard/index.js'
 import { Box } from '@mui/material'
+import { memo } from 'react'
 import { useI18N } from '../../../../../utils/i18n-next-ui.js'
-import { EmptyStatus, ElementAnchor } from '@masknet/shared'
 import { type Friend } from '../../../hook/useFriends.js'
-import { type BindingProof } from '@masknet/shared-base'
+import { ContactCard } from '../ContactCard/index.js'
 
 const useStyles = makeStyles()((theme) => ({
     empty: {
@@ -53,7 +53,7 @@ export const Contacts = memo<ContactsProps>(function Contacts({ friends, fetchNe
                         avatar={friend.avatar}
                         nextId={friend.persona?.publicKeyAsHex}
                         publicKey={friend.persona?.rawPublicKey}
-                        profiles={profiles[index] || []}
+                        profiles={profiles[index] || EMPTY_LIST}
                         isLocal
                     />
                 )

diff --git a/packages/mask/src/extension/popups/pages/Friends/Home/UI.tsx b/packages/mask/src/extension/popups/pages/Friends/Home/UI.tsx
@@ -71,9 +71,7 @@ export const FriendsHomeUI = memo<FriendsHomeUIProps>(function FriendsHomeUI({
             ) : searchValue ? (
                 <SearchList searchResult={searchResult} />
             ) : (
-                <>
-                    <Contacts friends={friends} fetchNextPage={fetchNextPage} profiles={profiles} />
-                </>
+                <Contacts friends={friends} fetchNextPage={fetchNextPage} profiles={profiles} />
             )}
         </div>
     )