refactor: make network plugin id to complex setting

packages/mask/src/UIRoot.tsx

@@ -3,14 +3,15 @@ import { StyledEngineProvider, Theme } from '@mui/material'
 import { PluginsWeb3ContextProvider, useAllPluginsWeb3State } from '@masknet/plugin-infra/web3'
 import { I18NextProviderHMR, SharedContextProvider } from '@masknet/shared'
 import { ErrorBoundary, ErrorBoundaryBuildInfoContext, useValueRef } from '@masknet/shared-base-ui'
-import { i18NextInstance } from '@masknet/shared-base'
+import { getSiteType, i18NextInstance } from '@masknet/shared-base'
 import { buildInfoMarkdown } from './utils/BuildInfoMarkdown'
 import { activatedSocialNetworkUI } from './social-network'
 import { isFacebook } from './social-network-adaptor/facebook.com/base'
 import { pluginIDSettings } from './settings/settings'
 import { getBackgroundColor } from './utils'
 import { isTwitter } from './social-network-adaptor/twitter.com/base'
 import { MaskThemeProvider } from '@masknet/theme'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 const identity = (jsx: React.ReactNode) => jsx as JSX.Element
 function compose(init: React.ReactNode, ...f: Array<(children: React.ReactNode) => JSX.Element>) {
@@ -31,15 +32,22 @@ export interface MaskUIRootProps extends React.PropsWithChildren<{}> {
 }
 
 export function MaskUIRoot({ children, kind, useTheme }: MaskUIRootProps) {
-    const pluginID = useValueRef(pluginIDSettings)
+    const site = getSiteType()
+    const pluginIDs = useValueRef(pluginIDSettings)
     const PluginsWeb3State = useAllPluginsWeb3State()
 
     return compose(
         children,
         (jsx) => <Suspense fallback={null} children={jsx} />,
         (jsx) => <ErrorBoundaryBuildInfoContext.Provider value={buildInfoMarkdown} children={jsx} />,
         (jsx) => <ErrorBoundary children={jsx} />,
-        (jsx) => <PluginsWeb3ContextProvider pluginID={pluginID} value={PluginsWeb3State} children={jsx} />,
+        (jsx) => (
+            <PluginsWeb3ContextProvider
+                pluginID={site ? pluginIDs[site] : NetworkPluginID.PLUGIN_EVM}
+                value={PluginsWeb3State}
+                children={jsx}
+            />
+        ),
         (jsx) => <I18NextProviderHMR i18n={i18NextInstance} children={jsx} />,
         kind === 'page' ? (jsx) => <StyledEngineProvider injectFirst children={jsx} /> : identity,
         (jsx) => (

packages/mask/src/plugins/Wallet/SNSAdaptor/ConnectWalletDialog/index.tsx

@@ -10,6 +10,7 @@ import { WalletMessages } from '../../messages'
 import { ConnectionProgress } from './ConnectionProgress'
 import { useI18N } from '../../../../utils'
 import { pluginIDSettings } from '../../../../settings/settings'
+import { getSiteType } from '@masknet/shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     content: {
@@ -56,8 +57,12 @@ export function ConnectWalletDialog() {
 
         await connection.connect()
 
-        if (pluginID) {
-            pluginIDSettings.value = pluginID
+        const site = getSiteType()
+        if (pluginID && site) {
+            pluginIDSettings.value = {
+                ...pluginIDSettings.value,
+                [site]: pluginID,
+            }
         }
 
         setConnectWalletDialog({

packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/index.tsx

@@ -16,7 +16,7 @@ import { WalletMessages } from '../../messages'
 import { hasNativeAPI, nativeAPI } from '../../../../../shared/native-rpc'
 import { PluginProviderRender } from './PluginProviderRender'
 import { pluginIDSettings } from '../../../../settings/settings'
-import { isDashboardPage } from '@masknet/shared-base'
+import { getSiteType, isDashboardPage } from '@masknet/shared-base'
 import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
@@ -52,11 +52,12 @@ export function SelectProviderDialog(props: SelectProviderDialogProps) {
     }, [open])
     // #endregion
 
+    const site = getSiteType()
     const networks = getRegisteredWeb3Networks()
     const providers = getRegisteredWeb3Providers()
-    const pluginID = useValueRef(pluginIDSettings)
+    const pluginIDs = useValueRef(pluginIDSettings)
     const network = useNetworkDescriptor()
-    const [undeterminedPluginID, setUndeterminedPluginID] = useState(pluginID)
+    const [undeterminedPluginID, setUndeterminedPluginID] = useState(site ? pluginIDs[site] : undefined)
     const [undeterminedNetworkID, setUndeterminedNetworkID] = useState(network?.ID)
 
     const Web3State = useWeb3State(undeterminedPluginID)

packages/mask/src/settings/settings.ts

@@ -1,15 +1,33 @@
 import { isEqual } from 'lodash-unified'
 import { Appearance } from '@masknet/theme'
 import { LanguageOptions } from '@masknet/public-api'
-import { updateLanguage } from '@masknet/shared-base'
+import { EnhanceableSite, ExtensionSite, updateLanguage } from '@masknet/shared-base'
 import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { LaunchPage } from './types'
-import { createGlobalSettings, createNetworkSettings, createComplexNetworkSettings } from './createSettings'
+import {
+    createGlobalSettings,
+    createNetworkSettings,
+    createComplexNetworkSettings,
+    createComplexGlobalSettings,
+} from './createSettings'
 
 export const appearanceSettings = createGlobalSettings<Appearance>('appearance', Appearance.default)
 export const languageSettings = createGlobalSettings<LanguageOptions>('language', LanguageOptions.__auto__)
 languageSettings.addListener(updateLanguage)
-export const pluginIDSettings = createGlobalSettings<NetworkPluginID>('pluginID', NetworkPluginID.PLUGIN_EVM)
+export const pluginIDSettings = createComplexGlobalSettings<Record<EnhanceableSite | ExtensionSite, NetworkPluginID>>(
+    'pluginID',
+    {
+        [EnhanceableSite.Twitter]: NetworkPluginID.PLUGIN_EVM,
+        [EnhanceableSite.Facebook]: NetworkPluginID.PLUGIN_EVM,
+        [EnhanceableSite.Instagram]: NetworkPluginID.PLUGIN_EVM,
+        [EnhanceableSite.OpenSea]: NetworkPluginID.PLUGIN_EVM,
+        [EnhanceableSite.Minds]: NetworkPluginID.PLUGIN_EVM,
+        [EnhanceableSite.Localhost]: NetworkPluginID.PLUGIN_EVM,
+        [ExtensionSite.Popup]: NetworkPluginID.PLUGIN_EVM,
+        [ExtensionSite.Dashboard]: NetworkPluginID.PLUGIN_EVM,
+    },
+    isEqual,
+)
 export const userGuideVersion = createGlobalSettings('userGuideVersion', 'v2')
 
 export const currentSetupGuideStatus = createNetworkSettings('currentSetupGuideStatus', '')

packages/shared-base/src/Messages/Mask.ts

@@ -2,6 +2,7 @@ import type { Appearance, LanguageOptions } from '@masknet/public-api'
 import type { SerializableTypedMessages } from '@masknet/typed-message'
 import type { ProfileIdentifier, PersonaIdentifier } from '../Identifier'
 import type { RelationFavor } from '../Persona/type'
+import type { EnhanceableSite, ExtensionSite } from '../Site'
 
 enum NetworkPluginID {
     PLUGIN_EVM = 'com.mask.evm',
@@ -11,7 +12,7 @@ enum NetworkPluginID {
 
 export interface MaskSettingsEvents {
     appearanceSettings: Appearance
-    pluginIDSettings: NetworkPluginID
+    pluginIDSettings: Record<EnhanceableSite | ExtensionSite, NetworkPluginID>
     languageSettings: LanguageOptions
     currentPersonaIdentifier: string
 }