[Release] Hotfix 2.21.3 => 2.21.4 (patch) (#10162)

* chore: bump version 2.21.4 * chore: patches/@walletconnect__socket-transport (#10165) * chore: patches/@walletconnect__socket-transport * chore: update lock file * chore: resume Connector * chore: resumeConnector * refactor: improve wc connection (#10168) * refactor: improve wc connection * refactor: destroy connection * refactor: disable v2 * chore: debug * refactor: remove connector * chore: patch wc * refactor: improve stability * refactor: improve connection debugger * fix: lint errors * feat: switch logo plugin (#10178) * feat: switch logo plugin * chore: update lock file * feat: plugin storage * fix: bugfix * refactor: code style * fix: switch logo plugin (#10184) * refactor: code stlye * refactor: code stlye * fix: async * feat: application settings dialog * fix: use legacy settings * fix: typo * fix: type errors --------- Co-authored-by: lelenei <[email protected]> * fix: logo color (#10186) * fix: change twitter logo (#10189) * fix: copywriting (#10187) * fix: adjust ui (#10190) * fix: show switch logo in guidestep (#10191) * fix: icon border (#10193) * fix: copywriting (#10197) * fix: open switch logo (#10201) * fix: add new line to share text (#10203) --------- Co-authored-by: lelenei <[email protected]> Co-authored-by: lelenei <[email protected]>
DimensionDev · Jul 28, 2023 · 2a027e4 · 2a027e4
1 parent 9cb401b
commit 2a027e4
Show file tree

Hide file tree

Showing 60 changed files with 935 additions and 133 deletions.
diff --git a/.i18n-codegen.json b/.i18n-codegen.json
@@ -494,6 +494,18 @@
                 "trans": "Translate",
                 "emitTS": true
             }
+        },
+        {
+            "input": "./packages/plugins/SwitchLogo/src/locales/en-US.json",
+            "output": "./packages/plugins/SwitchLogo/src/locales/i18n_generated",
+            "parser": { "type": "i18next", "contextSeparator": "$", "pluralSeparator": "_" },
+            "generator": {
+                "type": "i18next/react-hooks",
+                "hooks": "useI18N",
+                "namespace": "io.mask.switch-logo",
+                "trans": "Translate",
+                "emitTS": true
+            }
         }
     ]
 }
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "yarn": ">=999.0.0",
     "npm": ">=999.0.0"
   },
-  "version": "2.21.3",
+  "version": "2.21.4",
   "private": true,
   "license": "AGPL-3.0-or-later",
   "scripts": {
@@ -153,7 +153,8 @@
       "[email protected]": "patches/[email protected]",
       "@chainsafe/[email protected]": "patches/@[email protected]",
       "@protobufjs/[email protected]": "patches/@[email protected]",
-      "[email protected]": "patches/[email protected]"
+      "[email protected]": "patches/[email protected]",
+      "@walletconnect/[email protected]": "patches/@[email protected]"
     }
   }
 }
diff --git a/packages/app/src/plugin-host/enable.ts b/packages/app/src/plugin-host/enable.ts
@@ -8,6 +8,7 @@ import {
     createI18NBundle,
     createKVStorageHost,
     i18NextInstance,
+    SwitchLogoOpenedState,
     ValueRefWithReady,
 } from '@masknet/shared-base'
 import { ChainId } from '@masknet/web3-shared-evm'
@@ -119,6 +120,8 @@ startPluginSNSAdaptor(CurrentSNSNetwork.__SPA__, {
             send: reject,
             NFTAvatarTimelineUpdated: emptyEventRegistry,
             themeSettings: createConstantSubscription(undefined),
+            switchLogoSettings: {},
+            switchLogoOpenedState: new ValueRefWithReady<SwitchLogoOpenedState>(SwitchLogoOpenedState.Unopened),
         }
     },
     permission: {

diff --git a/packages/flags/src/flags/index.ts b/packages/flags/src/flags/index.ts
@@ -54,7 +54,7 @@ export const flags = {
     wc_v2_project_id: '8f1769933420afe8873860925fcca14f',
     wc_v2_mode: process.env.NODE_ENV === 'production' ? 'error' : 'debug',
     wc_v1_enabled: true,
-    wc_v2_enabled: betaOrInsiderOnly,
+    wc_v2_enabled: false,
 } as const
 
 Object.freeze(flags.shadowRootInit)

diff --git a/packages/icons/brands/twitter3.dark.svg b/packages/icons/brands/twitter3.dark.svg
diff --git a/packages/icons/brands/twitter3.light.svg b/packages/icons/brands/twitter3.light.svg
diff --git a/packages/icons/general/SwitchLogo.dark.svg b/packages/icons/general/SwitchLogo.dark.svg
diff --git a/packages/icons/general/SwitchLogo.light.svg b/packages/icons/general/SwitchLogo.light.svg
diff --git a/packages/icons/icon-generated-as-jsx.js b/packages/icons/icon-generated-as-jsx.js
@@ -467,6 +467,16 @@ export const TelegramRound = /*#__PURE__*/ __createIcon('TelegramRound', [
         u: () => new URL('./brands/TelegramRound.svg', import.meta.url),
     },
 ])
+export const Twitter3 = /*#__PURE__*/ __createIcon('twitter3', [
+    {
+        c: ['dark'],
+        u: () => new URL('./brands/twitter3.dark.svg', import.meta.url),
+    },
+    {
+        c: ['light'],
+        u: () => new URL('./brands/twitter3.light.svg', import.meta.url),
+    },
+])
 export const TwitterColored = /*#__PURE__*/ __createIcon('TwitterColored', [
     {
         u: () => new URL('./brands/TwitterColored.svg', import.meta.url),
@@ -2201,6 +2211,16 @@ export const SwapColorful = /*#__PURE__*/ __createIcon('SwapColorful', [
         u: () => new URL('./general/SwapColorful.svg', import.meta.url),
     },
 ])
+export const SwitchLogo = /*#__PURE__*/ __createIcon('SwitchLogo', [
+    {
+        c: ['dark'],
+        u: () => new URL('./general/SwitchLogo.dark.svg', import.meta.url),
+    },
+    {
+        c: ['light'],
+        u: () => new URL('./general/SwitchLogo.light.svg', import.meta.url),
+    },
+])
 export const TelegramRoundGray = /*#__PURE__*/ __createIcon('TelegramRoundGray', [
     {
         u: () => new URL('./general/TelegramRoundGray.svg', import.meta.url),

diff --git a/packages/icons/icon-generated-as-url.js b/packages/icons/icon-generated-as-url.js
@@ -90,6 +90,8 @@ export function solana_url() { return new URL("./brands/Solana.svg", import.meta
 export function sushi_swap_url() { return new URL("./brands/SushiSwap.png", import.meta.url) }
 export function sybil_url() { return new URL("./brands/Sybil.png", import.meta.url) }
 export function telegram_round_url() { return new URL("./brands/TelegramRound.svg", import.meta.url) }
+export function twitter_3_dark_url() { return new URL("./brands/twitter3.dark.svg", import.meta.url) }
+export function twitter_3_light_url() { return new URL("./brands/twitter3.light.svg", import.meta.url) }
 export function twitter_colored_url() { return new URL("./brands/TwitterColored.svg", import.meta.url) }
 export function twitter_other_colored_url() { return new URL("./brands/TwitterOtherColored.svg", import.meta.url) }
 export function twitter_round_url() { return new URL("./brands/TwitterRound.svg", import.meta.url) }
@@ -260,6 +262,8 @@ export function success_url() { return new URL("./general/Success.svg", import.m
 export function success_for_snack_bar_url() { return new URL("./general/SuccessForSnackBar.svg", import.meta.url) }
 export function swap_url() { return new URL("./general/Swap.svg", import.meta.url) }
 export function swap_colorful_url() { return new URL("./general/SwapColorful.svg", import.meta.url) }
+export function switch_logo_dark_url() { return new URL("./general/SwitchLogo.dark.svg", import.meta.url) }
+export function switch_logo_light_url() { return new URL("./general/SwitchLogo.light.svg", import.meta.url) }
 export function telegram_round_gray_url() { return new URL("./general/TelegramRoundGray.svg", import.meta.url) }
 export function tick_url() { return new URL("./general/Tick.svg", import.meta.url) }
 export function tip_url() { return new URL("./general/Tip.svg", import.meta.url) }

diff --git a/packages/mask/package.json b/packages/mask/package.json
@@ -45,6 +45,7 @@
     "@masknet/plugin-scamsniffer": "workspace:^",
     "@masknet/plugin-smart-pay": "workspace:^",
     "@masknet/plugin-solana": "workspace:^",
+    "@masknet/plugin-switch-logo": "workspace:^",
     "@masknet/plugin-transak": "workspace:^",
     "@masknet/plugin-vcent": "workspace:^",
     "@masknet/plugin-wallet": "workspace:^",

diff --git a/packages/mask/shared/legacy-settings/settings.ts b/packages/mask/shared/legacy-settings/settings.ts
@@ -1,7 +1,14 @@
 import { isEqual } from 'lodash-es'
 import { Appearance } from '@masknet/theme'
 import { LanguageOptions } from '@masknet/public-api'
-import { EnhanceableSite, ExtensionSite, updateLanguage, NetworkPluginID } from '@masknet/shared-base'
+import {
+    EnhanceableSite,
+    ExtensionSite,
+    updateLanguage,
+    NetworkPluginID,
+    SwitchLogoType,
+    SwitchLogoOpenedState,
+} from '@masknet/shared-base'
 import { BooleanPreference } from '@masknet/plugin-infra'
 import { Sentry } from '@masknet/web3-telemetry'
 import { createGlobalSettings, createBulkSettings } from './createSettings.js'
@@ -69,3 +76,9 @@ try {
     else if (lng === 'ko') languageSettings.value = LanguageOptions.koKR
     else languageSettings.value = LanguageOptions.__auto__
 } catch {}
+
+export const switchLogoSettings = createBulkSettings('SwitchLogo', SwitchLogoType.New)
+export const switchLogoOpenedState = createGlobalSettings<SwitchLogoOpenedState>(
+    'SwitchLogoOpenedState',
+    SwitchLogoOpenedState.Unopened,
+)
diff --git a/packages/mask/shared/plugin-infra/register.js b/packages/mask/shared/plugin-infra/register.js
@@ -28,6 +28,7 @@ import '@masknet/plugin-transak'
 import '@masknet/plugin-vcent'
 import '../../src/plugins/Trader/index.js'
 import '@masknet/plugin-avatar/register'
+import '@masknet/plugin-switch-logo/register'
 import '@masknet/plugin-maskbox'
 import '../../src/plugins/NextID/index.js'
 import '../../src/plugins/Pets/index.js'

diff --git a/packages/mask/src/components/GuideStep/index.tsx b/packages/mask/src/components/GuideStep/index.tsx
@@ -1,10 +1,16 @@
-import { cloneElement, type ReactElement, useRef, useState, useLayoutEffect } from 'react'
+import { cloneElement, type ReactElement, useRef, useState, useLayoutEffect, useEffect } from 'react'
 import { useValueRef } from '@masknet/shared-base-ui'
 import { makeStyles, usePortalShadowRoot } from '@masknet/theme'
 import { Box, Modal, styled, Typography } from '@mui/material'
-import { sayHelloShowed, userGuideFinished, userGuideStatus } from '../../../shared/legacy-settings/settings.js'
+import {
+    sayHelloShowed,
+    switchLogoOpenedState,
+    userGuideFinished,
+    userGuideStatus,
+} from '../../../shared/legacy-settings/settings.js'
 import { activatedSocialNetworkUI } from '../../social-network/index.js'
 import { useI18N } from '../../utils/index.js'
+import { CrossIsolationMessages, EnhanceableSite, SwitchLogoOpenedState } from '@masknet/shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
@@ -116,12 +122,22 @@ export default function GuideStep({ total, step, tip, children, arrow = true, on
     const box3Ref = useRef<HTMLDivElement>(null)
 
     const stepVisible = isCurrentStep && !finished && !!clientRect?.top && !!clientRect.left
+    const state = useValueRef(switchLogoOpenedState)
 
     const onSkip = () => {
         sayHelloShowed[networkIdentifier].value = true
         userGuideFinished[networkIdentifier].value = true
+        CrossIsolationMessages.events.switchLogoUpdated.sendToAll({ open: true })
     }
 
+    useEffect(() => {
+        return CrossIsolationMessages.events.switchLogoLoadedUpdated.on(() => {
+            if (!finished || state === SwitchLogoOpenedState.Opened || networkIdentifier !== EnhanceableSite.Twitter)
+                return
+            CrossIsolationMessages.events.switchLogoUpdated.sendToAll({ open: true })
+        })
+    }, [finished, state, networkIdentifier])
+
     const onNext = () => {
         if (step !== total) {
             userGuideStatus[networkIdentifier].value = String(step + 1)
@@ -134,6 +150,7 @@ export default function GuideStep({ total, step, tip, children, arrow = true, on
     const onTry = () => {
         userGuideFinished[networkIdentifier].value = true
         onComplete?.()
+        CrossIsolationMessages.events.switchLogoUpdated.sendToAll({ open: true })
     }
 
     useLayoutEffect(() => {

diff --git a/packages/mask/src/components/InjectedComponents/SetupGuide.tsx b/packages/mask/src/components/InjectedComponents/SetupGuide.tsx
@@ -94,13 +94,13 @@ function SetupGuideUI(props: SetupGuideUIProps) {
         if (isBound) return
 
         const afterVerify = () => setOperation(true)
+
         await handleVerifyNextID(destinedPersonaInfo, userId, afterVerify)
     }, [userId, destinedPersonaInfo])
 
     const onVerifyDone = useCallback(() => {
-        if (step === SetupGuideStep.VerifyOnNextID) {
-            currentSetupGuideStatus[activatedSocialNetworkUI.networkIdentifier].value = ''
-        }
+        if (!(step === SetupGuideStep.VerifyOnNextID)) return
+        currentSetupGuideStatus[activatedSocialNetworkUI.networkIdentifier].value = ''
     }, [step])
 
     const onClose = useCallback(() => {

diff --git a/packages/mask/src/components/shared/ApplicationBoardDialog.tsx b/packages/mask/src/components/shared/ApplicationBoardDialog.tsx
@@ -1,4 +1,3 @@
-import { useState, useCallback } from 'react'
 import { DialogContent, IconButton, Tab } from '@mui/material'
 import { TabContext, TabPanel } from '@mui/lab'
 import { makeStyles, MaskTabList, useTabs } from '@masknet/theme'
@@ -11,6 +10,7 @@ import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { ApplicationBoard } from './ApplicationBoard.js'
 import { WalletMessages } from '@masknet/plugin-wallet'
 import { useI18N } from '../../utils/index.js'
+import { useCallback, useState } from 'react'
 
 const useStyles = makeStyles<{
     openSettings: boolean

diff --git a/packages/mask/src/components/shared/ApplicationSettingsDialog.tsx b/packages/mask/src/components/shared/ApplicationSettingsDialog.tsx
@@ -0,0 +1,75 @@
+import { MaskTabList, makeStyles, useTabs } from '@masknet/theme'
+import { TabContext, TabPanel } from '@mui/lab'
+import { DialogContent, Tab } from '@mui/material'
+import { memo, useEffect } from 'react'
+import { ApplicationSettingPluginList } from './ApplicationSettingPluginList.js'
+import { ApplicationSettingPluginSwitch } from './ApplicationSettingPluginSwitch.js'
+import { ApplicationSettingTabs } from './ApplicationBoardDialog.js'
+import type { PluginID } from '@masknet/shared-base'
+import { InjectedDialog } from '@masknet/shared'
+import { useI18N } from '../../utils/index.js'
+import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
+import { WalletMessages } from '@masknet/plugin-wallet'
+
+interface ApplicationBoardSettingsProps {
+    focusPluginID?: PluginID
+    tab?: ApplicationSettingTabs
+}
+
+const useStyles = makeStyles()((theme) => {
+    return {
+        content: {
+            padding: theme.spacing(1.5, 2, '6px'),
+            height: 'auto',
+            overflow: 'hidden scroll',
+            '&::-webkit-scrollbar': {
+                display: 'none',
+            },
+        },
+    }
+})
+
+export const ApplicationBoardSettingsDialog = memo<ApplicationBoardSettingsProps>(
+    ({ focusPluginID, tab = ApplicationSettingTabs.pluginSwitch }) => {
+        const { t } = useI18N()
+        const { classes } = useStyles()
+        const [currentTab, onChange, tabs, setTab] = useTabs(
+            ApplicationSettingTabs.pluginList,
+            ApplicationSettingTabs.pluginSwitch,
+        )
+
+        const { open, closeDialog } = useRemoteControlledDialog(
+            WalletMessages.events.applicationSettingsDialogUpdated,
+            (evt) => {
+                if (!evt.open) return
+                setTab(ApplicationSettingTabs.pluginSwitch)
+            },
+        )
+
+        useEffect(() => setTab(tab), [tab])
+        return (
+            <TabContext value={currentTab}>
+                <InjectedDialog
+                    open={open}
+                    maxWidth="sm"
+                    onClose={closeDialog}
+                    titleTabs={
+                        <MaskTabList variant="base" onChange={onChange} aria-label="ApplicationBoard">
+                            <Tab label={t('application_settings_tab_app_list')} value={tabs.pluginList} />
+                            <Tab label={t('application_settings_tab_plug_in_switch')} value={tabs.pluginSwitch} />
+                        </MaskTabList>
+                    }
+                    title={t('application_settings')}>
+                    <DialogContent className={classes.content}>
+                        <TabPanel value={tabs.pluginList} style={{ padding: 0 }}>
+                            <ApplicationSettingPluginList />
+                        </TabPanel>
+                        <TabPanel value={tabs.pluginSwitch} style={{ padding: 0 }}>
+                            <ApplicationSettingPluginSwitch focusPluginID={focusPluginID} />
+                        </TabPanel>
+                    </DialogContent>
+                </InjectedDialog>
+            </TabContext>
+        )
+    },
+)
diff --git a/packages/mask/src/manifest.json b/packages/mask/src/manifest.json
@@ -1,6 +1,6 @@
 {
     "name": "Mask Network",
-    "version": "2.21.3",
+    "version": "2.21.4",
     "manifest_version": 2,
     "permissions": ["storage", "downloads", "webNavigation", "activeTab"],
     "optional_permissions": ["<all_urls>", "notifications", "clipboardRead"],

diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/index.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/index.tsx
@@ -11,6 +11,7 @@ import { GasSettingDialog } from './GasSettingDialog/index.js'
 import { TransactionSnackbar } from './TransactionSnackbar/index.js'
 import { ApplicationBoardDialog } from '../../../components/shared/ApplicationBoardDialog.js'
 import { LeavePageConfirmDialog } from '../../../components/shared/LeavePageConfirmDialog.js'
+import { ApplicationBoardSettingsDialog } from '../../../components/shared/ApplicationSettingsDialog.js'
 
 const sns: Plugin.SNSAdaptor.Definition = {
     ...base,
@@ -21,6 +22,7 @@ const sns: Plugin.SNSAdaptor.Definition = {
                 <SelectProviderDialog />
                 <WalletStatusDialog />
                 <ApplicationBoardDialog />
+                <ApplicationBoardSettingsDialog />
                 <ConnectWalletDialog />
                 <WalletRiskWarningDialog />
                 <GasSettingDialog />

diff --git a/packages/mask/src/social-network-adaptor/twitter.com/injection/SwitchLogo.tsx b/packages/mask/src/social-network-adaptor/twitter.com/injection/SwitchLogo.tsx
@@ -0,0 +1,24 @@
+import { SwitchLogoButton } from '@masknet/plugin-switch-logo'
+import { MutationObserverWatcher, type LiveSelector } from '@dimensiondev/holoflows-kit'
+import { querySelector } from '../utils/selector.js'
+import { attachReactTreeWithContainer } from '../../../utils/shadow-root/renderInShadowRoot.js'
+import { startWatch } from '../../../utils/watcher.js'
+import { useLastRecognizedIdentity } from '../../../components/DataSource/useActivatedUI.js'
+import { switchLogoSettings } from '../../../../shared/legacy-settings/settings.js'
+
+const logoSelector: () => LiveSelector<HTMLElement, true> = () => {
+    return querySelector<HTMLElement>('h1[role="heading"] a > div > svg').closest(1)
+}
+
+export function injectSwitchLogoButton(signal: AbortSignal) {
+    const watcher = new MutationObserverWatcher(logoSelector())
+    startWatch(watcher, signal)
+    attachReactTreeWithContainer(watcher.firstDOMProxy.afterShadow, { untilVisible: true, signal }).render(
+        <InjectSwitchLogoButton />,
+    )
+}
+
+function InjectSwitchLogoButton() {
+    const identity = useLastRecognizedIdentity()
+    return <SwitchLogoButton identity={identity} switchLogoSettings={switchLogoSettings} />
+}
diff --git a/packages/mask/src/social-network-adaptor/twitter.com/ui-provider.ts b/packages/mask/src/social-network-adaptor/twitter.com/ui-provider.ts
@@ -43,6 +43,7 @@ import { injectProfileCardHolder } from './injection/ProfileCard/index.js'
 import { injectAvatar } from './injection/Avatar/index.js'
 import { injectLens } from './injection/Lens/index.js'
 import { injectNFTAvatarInTwitter } from './injection/NFT/index.js'
+import { injectSwitchLogoButton } from './injection/SwitchLogo.js'
 
 const useInjectedDialogClassesOverwriteTwitter = makeStyles()((theme) => {
     const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`
@@ -204,6 +205,7 @@ const twitterUI: SocialNetworkUI.Definition = {
         tips: injectTips,
         lens: injectLens,
         profileCard: injectProfileCardHolder,
+        switchLogo: injectSwitchLogoButton,
     },
     configuration: {
         themeSettings: {