refactor: switch logo guide (#10852)

* refactor: nomore auto open switch logo dialog * refactor: remove state * refactor: migrate SwitchLogoDialog
DimensionDev · Sep 25, 2023 · a9176d5 · a9176d5
1 parent 66006e9
commit a9176d5
Show file tree

Hide file tree

Showing 13 changed files with 64 additions and 100 deletions.
diff --git a/packages/mask/shared-ui/locales/en-US.json b/packages/mask/shared-ui/locales/en-US.json
@@ -1198,13 +1198,6 @@
     "about_collection": "Abount {{- name}}",
     "hide_collectible": "Hide {{-name}}",
     "hide_collectible_description": "Confirm to hide {{- name}}? You can redisplay it by re-adding this NFT at any time.",
-    "switch_logo_title": "Switch Twitter Logo",
-    "switch_logo_save_tip": "Share and recommend this feature after saving.",
-    "switch_logo_classics_logo": "Classics Logo",
-    "switch_logo_new_logo": "New Logo",
-    "switch_logo_share_text": "I just replaced Twitter X logo with the original blue bird one with Mask Network extension.",
-    "switch_logo_share_mask": "Download https://mask.io to try more powerful tools on Twitter.",
-    "switch_logo_description": "Switch between the classic Twitter logo and the new one.",
     "add_new_address_to_an_existing_group": "Add new address to an existing group",
     "or_create_a_new_wallet_group": "Or create a new wallet group"
 }
diff --git a/packages/mask/src/components/GuideStep/index.tsx b/packages/mask/src/components/GuideStep/index.tsx
@@ -1,15 +1,7 @@
 import { cloneElement, useRef, useState, type ReactElement, useLayoutEffect } from 'react'
 import { makeStyles, usePortalShadowRoot } from '@masknet/theme'
 import { Box, Modal, styled, Typography } from '@mui/material'
-import {
-    CrossIsolationMessages,
-    EnhanceableSite,
-    SwitchLogoDialogStatus,
-    sayHelloShowed,
-    switchLogoOpenedState,
-    userGuideFinished,
-    userGuideStatus,
-} from '@masknet/shared-base'
+import { sayHelloShowed, userGuideFinished, userGuideStatus } from '@masknet/shared-base'
 import { useValueRef } from '@masknet/shared-base-ui'
 import { activatedSiteAdaptorUI } from '../../site-adaptor-infra/index.js'
 import { useI18N } from '../../utils/index.js'
@@ -120,7 +112,6 @@ export default function GuideStep({ total, step, tip, children, arrow = true, on
     const currentStep = useValueRef(userGuideStatus[networkIdentifier])
     const finished = useValueRef(userGuideFinished[networkIdentifier])
     const isCurrentStep = +currentStep === step
-    const state = useValueRef(switchLogoOpenedState)
 
     const box1Ref = useRef<HTMLDivElement>(null)
     const box2Ref = useRef<HTMLDivElement>(null)
@@ -131,7 +122,6 @@ export default function GuideStep({ total, step, tip, children, arrow = true, on
     const onSkip = () => {
         sayHelloShowed[networkIdentifier].value = true
         userGuideFinished[networkIdentifier].value = true
-        CrossIsolationMessages.events.switchLogoDialogUpdated.sendToLocal({ open: true })
     }
 
     const onNext = () => {
@@ -146,19 +136,8 @@ export default function GuideStep({ total, step, tip, children, arrow = true, on
     const onTry = () => {
         userGuideFinished[networkIdentifier].value = true
         onComplete?.()
-        CrossIsolationMessages.events.switchLogoDialogUpdated.sendToLocal({ open: true })
     }
 
-    useLayoutEffect(() => {
-        if (
-            !finished ||
-            state === SwitchLogoDialogStatus.PreviouslyOpened ||
-            networkIdentifier !== EnhanceableSite.Twitter
-        )
-            return
-        CrossIsolationMessages.events.switchLogoDialogUpdated.sendToLocal({ open: true })
-    }, [finished, state, networkIdentifier])
-
     useLayoutEffect(() => {
         let stopped = false
         requestAnimationFrame(function fn() {

diff --git a/packages/mask/src/components/InjectedComponents/SwitchLogo/index.ts b/packages/mask/src/components/InjectedComponents/SwitchLogo/index.ts
diff --git a/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx b/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx
@@ -31,7 +31,6 @@ import { makeStyles } from '@masknet/theme'
 import { useI18N } from '../../utils/index.js'
 import GuideStep from '../GuideStep/index.js'
 import { useOpenApplicationBoardDialog } from '../shared/openApplicationBoardDialog.js'
-import { SwitchLogoDialog } from './SwitchLogo/SwitchLogoDialog.js'
 
 const useStyles = makeStyles()((theme) => ({
     title: {
@@ -75,32 +74,29 @@ function ToolboxHintForApplication(props: ToolboxHintProps) {
     const openApplicationBoardDialog = useOpenApplicationBoardDialog()
 
     return (
-        <>
-            <GuideStep step={1} total={4} tip={t('user_guide_tip_1')}>
-                <Container>
-                    <ListItemButton onClick={openApplicationBoardDialog}>
-                        <ListItemIcon>
-                            <Icons.MaskBlue size={iconSize} />
-                        </ListItemIcon>
-                        {mini ? null : (
-                            <ListItemText
-                                primary={
-                                    <Box
-                                        sx={{
-                                            display: 'flex',
-                                            justifyContent: 'space-between',
-                                            alignItems: 'center',
-                                        }}>
-                                        <Typography className={classes.title}>{t('mask_network')}</Typography>
-                                    </Box>
-                                }
-                            />
-                        )}
-                    </ListItemButton>
-                </Container>
-            </GuideStep>
-            <SwitchLogoDialog />
-        </>
+        <GuideStep step={1} total={4} tip={t('user_guide_tip_1')}>
+            <Container>
+                <ListItemButton onClick={openApplicationBoardDialog}>
+                    <ListItemIcon>
+                        <Icons.MaskBlue size={iconSize} />
+                    </ListItemIcon>
+                    {mini ? null : (
+                        <ListItemText
+                            primary={
+                                <Box
+                                    sx={{
+                                        display: 'flex',
+                                        justifyContent: 'space-between',
+                                        alignItems: 'center',
+                                    }}>
+                                    <Typography className={classes.title}>{t('mask_network')}</Typography>
+                                </Box>
+                            }
+                        />
+                    )}
+                </ListItemButton>
+            </Container>
+        </GuideStep>
     )
 }
 

diff --git a/packages/mask/src/extension/popups/pages/Wallet/CreateWallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/CreateWallet/index.tsx
@@ -1,11 +1,11 @@
+import { memo } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { first, sortBy } from 'lodash-es'
 import { Icons } from '@masknet/icons'
 import { PopupRoutes } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
 import { formatEthereumAddress } from '@masknet/web3-shared-evm'
 import { List, ListItem, ListItemIcon, ListItemText, Tooltip, Typography } from '@mui/material'
-import { first, sortBy } from 'lodash-es'
-import { memo } from 'react'
-import { useNavigate } from 'react-router-dom'
 import { useI18N } from '../../../../../utils/index.js'
 import { useTitle } from '../../../hooks/index.js'
 import { useWalletGroup } from '../../../hooks/useWalletGroup.js'

diff --git a/packages/plugins/Calendar/src/SiteAdaptor/index.tsx b/packages/plugins/Calendar/src/SiteAdaptor/index.tsx
@@ -1,9 +1,9 @@
+import React from 'react'
+import { Trans } from 'react-i18next'
 import { type Plugin } from '@masknet/plugin-infra'
+import { Icons } from '@masknet/icons'
 import { base } from '../base.js'
-import { Trans } from 'react-i18next'
 import { PLUGIN_ID } from '../constants.js'
-import React from 'react'
-import { Icons } from '@masknet/icons'
 
 const recommendFeature = {
     description: <Trans i18nKey="description" ns={PLUGIN_ID} />,

diff --git a/packages/plugins/SwitchLogo/package.json b/packages/plugins/SwitchLogo/package.json
@@ -19,6 +19,7 @@
         "@masknet/shared-base": "workspace:^",
         "@masknet/shared-base-ui": "workspace:^",
         "@masknet/theme": "workspace:^",
+        "@masknet/web3-telemetry": "workspace:^",
         "react-use": "^17.4.0",
         "use-subscription": "^1.8.0"
     }

diff --git a/...omponents/SwitchLogo/SwitchLogoDialog.tsx → ...Logo/src/SiteAdaptor/SwitchLogoDialog.tsx b/...omponents/SwitchLogo/SwitchLogoDialog.tsx → ...Logo/src/SiteAdaptor/SwitchLogoDialog.tsx
@@ -5,17 +5,10 @@ import { makeStyles } from '@masknet/theme'
 import { Icons } from '@masknet/icons'
 import { Telemetry } from '@masknet/web3-telemetry'
 import { EventType, EventID } from '@masknet/web3-telemetry/types'
-import {
-    CrossIsolationMessages,
-    SwitchLogoDialogStatus,
-    SwitchLogoType,
-    switchLogoOpenedState,
-    switchLogoSettings,
-} from '@masknet/shared-base'
+import { CrossIsolationMessages, SwitchLogoType, switchLogoSettings } from '@masknet/shared-base'
+import { useLastRecognizedIdentity, useSiteAdaptorContext } from '@masknet/plugin-infra/content-script'
 import { useValueRef } from '@masknet/shared-base-ui'
-import { useI18N } from '../../../utils/index.js'
-import { useLastRecognizedIdentity } from '../../DataSource/useActivatedUI.js'
-import { activatedSiteAdaptorUI } from '../../../site-adaptor-infra/ui.js'
+import { useI18N } from '../locales/i18n_generated.js'
 
 const useStyles = makeStyles()((theme) => ({
     dialog: {
@@ -64,18 +57,18 @@ const useStyles = makeStyles()((theme) => ({
 interface SwitchLogoDialogProps {}
 
 export const SwitchLogoDialog = memo<SwitchLogoDialogProps>(() => {
-    const { t } = useI18N()
+    const t = useI18N()
     const { classes, cx } = useStyles()
     const identity = useLastRecognizedIdentity()
     const defaultLogoType = useValueRef(switchLogoSettings[identity?.identifier?.userId || ''])
     const [logoType, setLogoType] = useState<SwitchLogoType>(SwitchLogoType.Classics)
     const [needShare, setNeedShare] = useState(true)
     const [open, setOpen] = useState(false)
+    const { share } = useSiteAdaptorContext()
 
     useEffect(() => {
         return CrossIsolationMessages.events.switchLogoDialogUpdated.on(async (data) => {
             setOpen(data.open)
-            switchLogoOpenedState.value = SwitchLogoDialogStatus.PreviouslyOpened
         })
     }, [])
 
@@ -85,15 +78,13 @@ export const SwitchLogoDialog = memo<SwitchLogoDialogProps>(() => {
         Telemetry.captureEvent(EventType.Access, EventID.EntrySwitchLogoSave)
         setOpen(false)
         if (needShare && logoType === SwitchLogoType.Classics) {
-            activatedSiteAdaptorUI!.utils.share?.(
-                [
-                    t('switch_logo_share_text'),
-                    '#TwitterLogo #TwitterX #SaveTheBird\n',
-                    t('switch_logo_share_mask'),
-                ].join('\n'),
+            share?.(
+                [t.switch_logo_share_text(), '#TwitterLogo #TwitterX #SaveTheBird\n', t.switch_logo_share_mask()].join(
+                    '\n',
+                ),
             )
         }
-    }, [logoType, identity?.identifier?.userId, defaultLogoType, activatedSiteAdaptorUI!.utils.share, needShare])
+    }, [logoType, identity?.identifier?.userId, defaultLogoType, share, needShare])
 
     const onChange = useCallback((logoType: SwitchLogoType) => {
         setLogoType(logoType)
@@ -110,7 +101,7 @@ export const SwitchLogoDialog = memo<SwitchLogoDialogProps>(() => {
         <InjectedDialog
             open={open}
             onClose={() => setOpen(false)}
-            title={t('switch_logo_title')}
+            title={t.switch_logo_title()}
             classes={{ paper: classes.dialog }}>
             <DialogContent className={classes.content}>
                 <Stack className={classes.icons}>
@@ -122,7 +113,7 @@ export const SwitchLogoDialog = memo<SwitchLogoDialogProps>(() => {
                         onClick={() => onChange(SwitchLogoType.Classics)}>
                         <Icons.TwitterColored />
                         <Typography fontSize={14} fontWeight={700}>
-                            {t('switch_logo_classics_logo')}
+                            {t.switch_logo_classics_logo()}
                         </Typography>
                     </Stack>
                     <Stack
@@ -133,7 +124,7 @@ export const SwitchLogoDialog = memo<SwitchLogoDialogProps>(() => {
                         onClick={() => onChange(SwitchLogoType.New)}>
                         <Icons.TwitterX />
                         <Typography fontSize={14} fontWeight={700}>
-                            {t('switch_logo_new_logo')}
+                            {t.switch_logo_new_logo()}
                         </Typography>
                     </Stack>
                 </Stack>
@@ -153,7 +144,7 @@ export const SwitchLogoDialog = memo<SwitchLogoDialogProps>(() => {
                                     fontWeight={400}
                                     lineHeight="18px"
                                     color={(theme) => theme.palette.maskColor.secondaryDark}>
-                                    {t('switch_logo_save_tip')}
+                                    {t.switch_logo_save_tip()}
                                 </Typography>
                             }
                         />
@@ -163,7 +154,7 @@ export const SwitchLogoDialog = memo<SwitchLogoDialogProps>(() => {
                 </Stack>
                 <Stack className={classes.buttons}>
                     <Button variant="roundedContained" fullWidth onClick={onSave} disabled={disabled}>
-                        {t('save')}
+                        {t.save()}
                     </Button>
                 </Stack>
                 <Stack className={classes.powered_by}>
@@ -172,10 +163,10 @@ export const SwitchLogoDialog = memo<SwitchLogoDialogProps>(() => {
                         fontWeight={700}
                         marginRight="5px"
                         color={(theme) => theme.palette.maskColor.secondaryDark}>
-                        {t('powered_by')}
+                        {t.powered_by()}
                     </Typography>
                     <Typography fontSize="14px" fontWeight={700} marginRight="4px">
-                        {t('mask_network')}
+                        {t.mask_network()}
                     </Typography>
                     <IconButton size="small" sx={{ margin: '-5px' }} onClick={() => openApplicationBoardDialog()}>
                         <Icons.Gear size={24} />

diff --git a/packages/plugins/SwitchLogo/src/SiteAdaptor/index.tsx b/packages/plugins/SwitchLogo/src/SiteAdaptor/index.tsx
@@ -5,6 +5,7 @@ import { PluginID } from '@masknet/shared-base'
 import { Icons } from '@masknet/icons'
 import { base } from '../base.js'
 import { PLUGIN_ID } from '../constants.js'
+import { SwitchLogoDialog } from './SwitchLogoDialog.js'
 
 const recommendFeature = {
     description: <Trans i18nKey="description" ns={PluginID.SwitchLogo} />,
@@ -24,6 +25,9 @@ const site: Plugin.SiteAdaptor.Definition = {
             description: recommendFeature.description,
         },
     ],
+    GlobalInjection() {
+        return <SwitchLogoDialog />
+    },
 }
 
 export default site
diff --git a/packages/plugins/SwitchLogo/src/locales/en-US.json b/packages/plugins/SwitchLogo/src/locales/en-US.json
@@ -9,5 +9,12 @@
     "mask_network": "Mask Network",
     "share_text": "I just replaced Twitter X logo with the original blue bird one with Mask Network extension.",
     "share_mask": "Download https://mask.io to try more powerful tools on Twitter.",
-    "description": "Switch between the classic Twitter logo and the new one."
+    "description": "Switch between the classic Twitter logo and the new one.",
+    "switch_logo_title": "Switch Twitter Logo",
+    "switch_logo_save_tip": "Share and recommend this feature after saving.",
+    "switch_logo_classics_logo": "Classics Logo",
+    "switch_logo_new_logo": "New Logo",
+    "switch_logo_share_text": "I just replaced Twitter X logo with the original blue bird one with Mask Network extension.",
+    "switch_logo_share_mask": "Download https://mask.io to try more powerful tools on Twitter.",
+    "switch_logo_description": "Switch between the classic Twitter logo and the new one."
 }
diff --git a/packages/shared-base/src/LegacySettings/settings.ts b/packages/shared-base/src/LegacySettings/settings.ts
@@ -6,7 +6,7 @@ import { BooleanPreference } from '../types.js'
 import { NetworkPluginID, PluginID } from '../types/PluginID.js'
 import { LockStatus } from '../types/Wallet.js'
 import { EnhanceableSite, ExtensionSite } from '../Site/types.js'
-import { SwitchLogoDialogStatus, SwitchLogoType } from '../types/SwitchLogo.js'
+import { SwitchLogoType } from '../types/SwitchLogo.js'
 import { ValueRefWithReady, type PersonaIdentifier, ECKeyIdentifier } from '../index.js'
 
 export const languageSettings = createGlobalSettings<LanguageOptions>('language', LanguageOptions.__auto__)
@@ -90,7 +90,3 @@ try {
 } catch {}
 
 export const switchLogoSettings = createBulkSettings('SwitchLogo', SwitchLogoType.New)
-export const switchLogoOpenedState = createGlobalSettings<SwitchLogoDialogStatus>(
-    'SwitchLogoOpenedState',
-    SwitchLogoDialogStatus.NeverOpened,
-)
diff --git a/packages/shared-base/src/types/SwitchLogo.ts b/packages/shared-base/src/types/SwitchLogo.ts
@@ -3,8 +3,3 @@ export enum SwitchLogoType {
     New = 'New',
     None = 'None',
 }
-
-export enum SwitchLogoDialogStatus {
-    NeverOpened = 0,
-    PreviouslyOpened = 1,
-}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml