refactor: use type-aware translate as much as possible

DimensionDev · Sep 4, 2024 · 92068f5 · 92068f5
1 parent fe850f5
commit 92068f5
Show file tree

Hide file tree

Showing 51 changed files with 441 additions and 268 deletions.
diff --git a/packages/mask/content-script/components/InjectedComponents/ProfileCard/index.tsx b/packages/mask/content-script/components/InjectedComponents/ProfileCard/index.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useMemo, useState, memo } from 'react'
-import { Trans } from 'react-i18next'
 import { useUpdateEffect } from 'react-use'
 import { compact, first } from 'lodash-es'
 import { TabContext } from '@mui/lab'
@@ -29,7 +28,7 @@ import { Telemetry } from '@masknet/web3-telemetry'
 import { EventType, EventID } from '@masknet/web3-telemetry/types'
 import Services from '#services'
 import { ProfileCardTitle } from './ProfileCardTitle.js'
-import { useMaskSharedTrans } from '../../../../shared-ui/index.js'
+import { useMaskSharedTrans, MaskSharedTrans } from '../../../../shared-ui/index.js'
 
 interface Props extends withClasses<'text' | 'button' | 'root'> {
     identity?: SocialIdentity
@@ -250,8 +249,8 @@ export const ProfileCard = memo(({ identity, currentAddress, ...rest }: Props) =
                         <Icons.Web3ProfileCard className={classes.cardIcon} size={24} />
                         <Typography className={classes.cardName}>{t.web3_profile_card_name()}</Typography>
                         <Typography variant="body1" className={classes.powered}>
-                            <Trans
-                                i18nKey="powered_by_whom"
+                            {/* eslint-disable-next-line react/naming-convention/component-name */}
+                            <MaskSharedTrans.powered_by_whom
                                 values={{ whom: 'RSS3' }}
                                 components={{
                                     span: (

diff --git a/...ges/mask/content-script/components/InjectedComponents/SetupGuide/AccountConnectStatus.tsx b/...ges/mask/content-script/components/InjectedComponents/SetupGuide/AccountConnectStatus.tsx
@@ -4,9 +4,8 @@ import { SOCIAL_MEDIA_NAME } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
 import { Box, Button, Typography } from '@mui/material'
 import { memo } from 'react'
-import { Trans } from 'react-i18next'
 import { activatedSiteAdaptorUI } from '../../../site-adaptor-infra/ui.js'
-import { useMaskSharedTrans } from '../../../../shared-ui/index.js'
+import { useMaskSharedTrans, MaskSharedTrans } from '../../../../shared-ui/index.js'
 import { SetupGuideContext } from './SetupGuideContext.js'
 
 const useStyles = makeStyles()((theme) => {
@@ -91,10 +90,10 @@ export const AccountConnectStatus = memo<Props>(function AccountConnectStatus({
         return (
             <Frame {...rest}>
                 <Typography className={classes.text}>
-                    <Trans
-                        i18nKey="connected_already"
+                    {/* eslint-disable-next-line react/naming-convention/component-name */}
+                    <MaskSharedTrans.connected_already
                         values={{
-                            account: currentUserId,
+                            account: currentUserId!,
                         }}
                         components={{
                             bold: <b />,
@@ -117,8 +116,8 @@ export const AccountConnectStatus = memo<Props>(function AccountConnectStatus({
             <Frame {...rest}>
                 <Typography className={classes.text}>{t.not_current_account()}</Typography>
                 <Typography className={classes.text} mt="1.5em">
-                    <Trans
-                        i18nKey="request_to_switch_account"
+                    {/* eslint-disable-next-line react/naming-convention/component-name */}
+                    <MaskSharedTrans.request_to_switch_account
                         values={{
                             account: expectAccount,
                         }}

diff --git a/packages/mask/content-script/components/InjectedComponents/SetupGuide/VerifyNextID.tsx b/packages/mask/content-script/components/InjectedComponents/SetupGuide/VerifyNextID.tsx
@@ -21,10 +21,9 @@ import { EventID, EventType } from '@masknet/web3-telemetry/types'
 import { Box, Link, Skeleton, Typography } from '@mui/material'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useCallback, useMemo, useState } from 'react'
-import { Trans } from 'react-i18next'
 import { useAsyncFn } from 'react-use'
 import Services from '../../../../shared-ui/service.js'
-import { useMaskSharedTrans } from '../../../../shared-ui/index.js'
+import { MaskSharedTrans, useMaskSharedTrans } from '../../../../shared-ui/index.js'
 import { AccountConnectStatus } from './AccountConnectStatus.js'
 import { SetupGuideContext } from './SetupGuideContext.js'
 import { useConnectPersona } from './hooks/useConnectPersona.js'
@@ -285,10 +284,13 @@ export function VerifyNextID({ onClose }: VerifyNextIDProps) {
                     </Box>
                     {!nextIdPlatform || verified || verifiedSuccess ?
                         <Typography className={classes.text}>
-                            <Trans
-                                i18nKey={nextIdPlatform ? 'send_post_successfully' : 'connect_successfully'}
-                                components={{ br: <br /> }}
-                            />
+                            {
+                                nextIdPlatform ?
+                                    // eslint-disable-next-line react/naming-convention/component-name
+                                    <MaskSharedTrans.send_post_successfully components={{ br: <br /> }} />
+                                    // eslint-disable-next-line react/naming-convention/component-name
+                                :   <MaskSharedTrans.connect_successfully components={{ br: <br /> }} />
+                            }
                         </Typography>
                     : creatingPostContent ?
                         <>

diff --git a/packages/mask/popups/components/ConnectedWallet/index.tsx b/packages/mask/popups/components/ConnectedWallet/index.tsx
@@ -9,8 +9,7 @@ import { ChainId, formatDomainName, formatEthereumAddress } from '@masknet/web3-
 import { Box, Link, Typography, useTheme } from '@mui/material'
 import { useQueries } from '@tanstack/react-query'
 import { memo, useCallback } from 'react'
-import { Trans } from 'react-i18next'
-import { useMaskSharedTrans } from '../../../shared-ui/index.js'
+import { MaskSharedTrans, useMaskSharedTrans } from '../../../shared-ui/index.js'
 import Services from '#services'
 import type { ConnectedWalletInfo } from '../../pages/Personas/type.js'
 import { useModalNavigate } from '../ActionModal/index.js'
@@ -194,8 +193,8 @@ export const ConnectedWallet = memo(function ConnectedWallet() {
                                     title: t.popups_release_bind_wallet_title(),
                                     confirmVariant: 'warning',
                                     message: (
-                                        <Trans
-                                            i18nKey="popups_wallet_disconnect_tips"
+                                        // eslint-disable-next-line react/naming-convention/component-name
+                                        <MaskSharedTrans.popups_wallet_disconnect_tips
                                             components={{
                                                 strong: <strong style={{ color: theme.palette.maskColor.main }} />,
                                             }}

diff --git a/packages/mask/popups/components/MnemonicDisplay/index.tsx b/packages/mask/popups/components/MnemonicDisplay/index.tsx
@@ -1,11 +1,10 @@
 import { memo } from 'react'
-import { Trans } from 'react-i18next'
 import { Icons } from '@masknet/icons'
 import { EMPTY_LIST } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
 import { Box, Button, Typography, alpha } from '@mui/material'
 import { useToggle } from '@react-hookz/web'
-import { useMaskSharedTrans } from '../../../shared-ui/index.js'
+import { MaskSharedTrans, useMaskSharedTrans } from '../../../shared-ui/index.js'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -90,7 +89,8 @@ export const MnemonicDisplay = memo<MnemonicDisplayProps>(function MnemonicDispl
                     <Box className={classes.mask} onClick={toggle}>
                         <Icons.EyeOff size={24} />
                         <Typography className={classes.tips}>
-                            <Trans i18nKey="popups_wallet_backup_mnemonic_view_tips" components={{ br: <br /> }} />
+                            {/* eslint-disable-next-line react/naming-convention/component-name */}
+                            <MaskSharedTrans.popups_wallet_backup_mnemonic_view_tips components={{ br: <br /> }} />
                         </Typography>
                     </Box>
                 :   null}

diff --git a/packages/mask/popups/components/PrivateKeyDisplay/index.tsx b/packages/mask/popups/components/PrivateKeyDisplay/index.tsx
@@ -4,12 +4,11 @@ import { useAsync, useCopyToClipboard } from 'react-use'
 import { memo, useCallback, useState } from 'react'
 import Services from '#services'
 import { Icons } from '@masknet/icons'
-import { useMaskSharedTrans } from '../../../shared-ui/index.js'
+import { MaskSharedTrans, useMaskSharedTrans } from '../../../shared-ui/index.js'
 import { Box, Typography, alpha } from '@mui/material'
 import { formatEthereumAddress } from '@masknet/web3-shared-evm'
 import { WalletBalance } from '../index.js'
 import { useToggle } from '@react-hookz/web'
-import { Trans } from 'react-i18next'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -146,8 +145,8 @@ export const PrivateKeyDisplay = memo<PrimaryKeyDisplayProps>(function PrivateKe
                             <Box className={classes.mask} onClick={toggle}>
                                 <Icons.EyeOff size={24} />
                                 <Typography className={classes.tips}>
-                                    <Trans
-                                        i18nKey="popups_wallet_backup_private_key_view_tips"
+                                    {/* eslint-disable-next-line react/naming-convention/component-name */}
+                                    <MaskSharedTrans.popups_wallet_backup_private_key_view_tips
                                         components={{ br: <br /> }}
                                     />
                                 </Typography>

diff --git a/packages/mask/popups/components/UnlockERC20Token/index.tsx b/packages/mask/popups/components/UnlockERC20Token/index.tsx
@@ -1,5 +1,4 @@
 import { memo, useMemo, useState } from 'react'
-import { Trans } from 'react-i18next'
 import { Box, Button, Link, TextField, Typography, useTheme } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { NUMERIC_INPUT_REGEXP_PATTERN, NetworkPluginID } from '@masknet/shared-base'
@@ -10,7 +9,7 @@ import { Icons } from '@masknet/icons'
 import { isGreaterThan, isZero, leftShift, rightShift } from '@masknet/web3-shared-base'
 import { GasSettingMenu } from '../GasSettingMenu/index.js'
 import type { TransactionDetail } from '../../pages/Wallet/type.js'
-import { useMaskSharedTrans } from '../../../shared-ui/index.js'
+import { MaskSharedTrans, useMaskSharedTrans } from '../../../shared-ui/index.js'
 import type { GasConfig } from '@masknet/web3-shared-evm'
 
 const useStyles = makeStyles()((theme) => ({
@@ -168,14 +167,15 @@ export const UnlockERC20Token = memo<UnlockERC20TokenProps>(function UnlockERC20
     return (
         <Box>
             <Typography className={classes.title}>
-                <Trans
-                    i18nKey="popups_wallet_unlock_erc20_title"
+                {/* eslint-disable-next-line react/naming-convention/component-name */}
+                <MaskSharedTrans.popups_wallet_unlock_erc20_title
                     components={{ br: <br /> }}
-                    values={{ symbol: token?.symbol }}
+                    values={{ symbol: token?.symbol || '' }}
                 />
             </Typography>
             <Typography className={classes.tips}>
-                <Trans i18nKey="popups_wallet_unlock_erc20_tips" components={{ br: <br /> }} />
+                {/* eslint-disable-next-line react/naming-convention/component-name */}
+                <MaskSharedTrans.popups_wallet_unlock_erc20_tips components={{ br: <br /> }} />
             </Typography>
             <Box className={classes.tokenInfo}>
                 <TokenIcon

diff --git a/packages/mask/popups/components/UnlockERC721Token/index.tsx b/packages/mask/popups/components/UnlockERC721Token/index.tsx
@@ -1,5 +1,4 @@
 import { memo, useMemo } from 'react'
-import { Trans } from 'react-i18next'
 import { Box, Link, Typography, useTheme } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { EMPTY_LIST, NetworkPluginID } from '@masknet/shared-base'
@@ -15,7 +14,7 @@ import { CopyButton, TokenIcon } from '@masknet/shared'
 import { Icons } from '@masknet/icons'
 import { GasSettingMenu } from '../GasSettingMenu/index.js'
 import type { TransactionDetail } from '../../pages/Wallet/type.js'
-import { useMaskSharedTrans } from '../../../shared-ui/index.js'
+import { MaskSharedTrans, useMaskSharedTrans } from '../../../shared-ui/index.js'
 import type { GasConfig } from '@masknet/web3-shared-evm'
 import { useQuery } from '@tanstack/react-query'
 import { TokenType, isSameAddress } from '@masknet/web3-shared-base'
@@ -161,14 +160,15 @@ export const UnlockERC721Token = memo<UnlockERC721TokenProps>(function UnlockERC
     return (
         <Box>
             <Typography className={classes.title}>
-                <Trans
-                    i18nKey="popups_wallet_unlock_erc721_title"
+                {/* eslint-disable-next-line react/naming-convention/component-name */}
+                <MaskSharedTrans.popups_wallet_unlock_erc721_title
                     components={{ br: <br /> }}
-                    values={{ symbol: contract?.symbol }}
+                    values={{ symbol: contract?.symbol || '' }}
                 />
             </Typography>
             <Typography className={classes.tips}>
-                <Trans i18nKey="popups_wallet_unlock_erc721_tips" components={{ br: <br /> }} />
+                {/* eslint-disable-next-line react/naming-convention/component-name */}
+                <MaskSharedTrans.popups_wallet_unlock_erc721_tips components={{ br: <br /> }} />
             </Typography>
             <Box className={classes.tokenInfo}>
                 {contract?.address ?

diff --git a/packages/mask/popups/components/WalletSettingList/index.tsx b/packages/mask/popups/components/WalletSettingList/index.tsx
@@ -24,8 +24,7 @@ import {
     List,
 } from '@mui/material'
 import { useMemo, useCallback, memo } from 'react'
-import { Trans } from 'react-i18next'
-import { useMaskSharedTrans } from '../../../shared-ui/index.js'
+import { MaskSharedTrans, useMaskSharedTrans } from '../../../shared-ui/index.js'
 import { LoadingBase } from '@masknet/theme'
 import { useNavigate } from 'react-router-dom'
 import urlcat from 'urlcat'
@@ -137,8 +136,8 @@ export const WalletList = memo<WalletListProps>(function WalletList({
             <Box flex={1} display="flex" justifyContent="center" alignItems="center" flexDirection="column">
                 <Icons.EmptySimple size={36} />
                 <Typography fontSize={14} color={theme.palette.maskColor.second} mt={1.5} textAlign="center">
-                    <Trans
-                        i18nKey="popups_empty_wallet_proofs_tips"
+                    {/* eslint-disable-next-line react/naming-convention/component-name */}
+                    <MaskSharedTrans.popups_empty_wallet_proofs_tips
                         components={{
                             strong: (
                                 <strong

diff --git a/packages/mask/popups/pages/Personas/AccountDetail/UI.tsx b/packages/mask/popups/pages/Personas/AccountDetail/UI.tsx
@@ -2,9 +2,8 @@ import { memo, useCallback } from 'react'
 import { ActionButton, makeStyles } from '@masknet/theme'
 import { Box, Button, Typography } from '@mui/material'
 import { AccountAvatar } from '../components/AccountAvatar/index.js'
-import { useMaskSharedTrans } from '../../../../shared-ui/index.js'
+import { MaskSharedTrans, useMaskSharedTrans } from '../../../../shared-ui/index.js'
 import { useNavigate } from 'react-router-dom'
-import { Trans } from 'react-i18next'
 import type { BindingProof, ProfileAccount } from '@masknet/shared-base'
 
 import { WalletList } from '../../../components/WalletSettingList/index.js'
@@ -79,7 +78,11 @@ export const AccountDetailUI = memo<AccountDetailUIProps>(
                             t.popups_display_web3_address_tips()
                         : isSupportNextDotID ?
                             t.popups_verify_account_tips()
-                        :   <Trans i18nKey="popups_other_social_accounts_tips" components={{ strong: <strong /> }} />}
+                            // eslint-disable-next-line react/naming-convention/component-name
+                        :   <MaskSharedTrans.popups_other_social_accounts_tips
+                                components={{ strong: <strong />, br: <br /> }}
+                            />
+                        }
                     </Typography>
 
                     <WalletList

diff --git a/packages/mask/popups/pages/Personas/AccountDetail/index.tsx b/packages/mask/popups/pages/Personas/AccountDetail/index.tsx
@@ -23,10 +23,9 @@ import { useTheme } from '@mui/material'
 import { useUpdateEffect } from '@react-hookz/web'
 import { useQueryClient } from '@tanstack/react-query'
 import { memo, useCallback, useContext, useEffect, useMemo, useState } from 'react'
-import { Trans } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { useAsyncFn } from 'react-use'
-import { requestPermissionFromExtensionPage, useMaskSharedTrans } from '../../../../shared-ui/index.js'
+import { MaskSharedTrans, requestPermissionFromExtensionPage, useMaskSharedTrans } from '../../../../shared-ui/index.js'
 import { DisconnectEventMap } from '../../../../shared/definitions/event.js'
 import { PageTitleContext, useTitle } from '../../../hooks/index.js'
 import { AccountDetailUI } from './UI.js'
@@ -195,8 +194,8 @@ export const Component = memo(() => {
                             title: t.popups_disconnect_persona(),
                             confirmVariant: 'warning',
                             message: (
-                                <Trans
-                                    i18nKey="popups_persona_disconnect_tips"
+                                // eslint-disable-next-line react/naming-convention/component-name
+                                <MaskSharedTrans.popups_persona_disconnect_tips
                                     components={{
                                         strong: (
                                             <strong
@@ -205,8 +204,8 @@ export const Component = memo(() => {
                                         ),
                                     }}
                                     values={{
-                                        identity: selectedAccount?.identifier.userId,
-                                        personaName: currentPersona.nickname,
+                                        identity: selectedAccount?.identifier.userId || '',
+                                        personaName: currentPersona.nickname || '',
                                     }}
                                 />
                             ),

diff --git a/packages/mask/popups/pages/Personas/ExportPrivateKey/index.tsx b/packages/mask/popups/pages/Personas/ExportPrivateKey/index.tsx
@@ -1,12 +1,11 @@
 import { memo, useCallback } from 'react'
 import { useTitle } from '../../../hooks/index.js'
-import { useMaskSharedTrans } from '../../../../shared-ui/index.js'
+import { MaskSharedTrans, useMaskSharedTrans } from '../../../../shared-ui/index.js'
 import { Box, Button, Link, Typography, useTheme } from '@mui/material'
 
 import { PersonaContext } from '@masknet/shared'
 import Services from '#services'
 import { useAsync, useCopyToClipboard } from 'react-use'
-import { Trans } from 'react-i18next'
 import { BottomController } from '../../../components/BottomController/index.js'
 import { useNavigate } from 'react-router-dom'
 import { PopupRoutes } from '@masknet/shared-base'
@@ -50,8 +49,8 @@ export const Component = memo(function ExportPrivateKey() {
                     </Typography>
                 :   null}
                 <Typography>
-                    <Trans
-                        i18nKey="popups_export_private_key_tips"
+                    {/* eslint-disable-next-line react/naming-convention/component-name */}
+                    <MaskSharedTrans.popups_export_private_key_tips
                         components={{
                             a: (
                                 <Link