feat(plugin-infra): add metadata previewer API; add minimal mode

packages/dashboard/src/initialization/PluginHost.ts

@@ -9,9 +9,15 @@ import { InMemoryStorages, PersistentStorages } from '../utils/kv-storage'
 
 const PluginHost: Plugin.__Host.Host<Plugin.Dashboard.DashboardContext> = {
     enabled: {
+        // Due to MASK-391, we don't have a user configurable "disabled" plugin.
+        // All plugins are always loaded but it might be displayed in the invisible mode.
+        isEnabled: () => true,
+        events: new Emitter(),
+    },
+    minimalMode: {
         events: new Emitter(),
         isEnabled: (id) => {
-            return Services.Settings.getPluginEnabled(id)
+            return Services.Settings.getPluginMinimalModeEnabled(id)
         },
     },
     addI18NResource(plugin, resource) {
@@ -27,7 +33,8 @@ const PluginHost: Plugin.__Host.Host<Plugin.Dashboard.DashboardContext> = {
     },
 }
 setTimeout(() => {
-    Messages.events.pluginEnabled.on((id) => PluginHost.enabled.events.emit('enabled', id))
-    Messages.events.pluginDisabled.on((id) => PluginHost.enabled.events.emit('disabled', id))
+    Messages.events.pluginMinimalModeChanged.on(([id, status]) => {
+        PluginHost.minimalMode.events.emit(status ? 'enabled' : 'disabled', id)
+    })
     startPluginDashboard(PluginHost)
 })

packages/dashboard/src/pages/Labs/components/PluginItem.tsx

@@ -58,6 +58,7 @@ export interface PluginItemProps {
     desc: string
     icon?: ReactNode
     enabled?: boolean
+    hideSwitch?: boolean
     onSwitch: (id: string, checked: boolean) => void
     onTwitter?: (id: string) => void
     onFacebook?: (id: string) => void
@@ -72,7 +73,20 @@ export function PluginItemPlaceholder() {
 }
 
 export default function PluginItem(props: PluginItemProps) {
-    const { id, title, desc, icon, enabled, onSwitch, onTwitter, onFacebook, onExplore, onSetting, onTutorial } = props
+    const {
+        id,
+        title,
+        desc,
+        icon,
+        enabled = false,
+        hideSwitch,
+        onSwitch,
+        onTwitter,
+        onFacebook,
+        onExplore,
+        onSetting,
+        onTutorial,
+    } = props
     const { classes } = useStyles()
     return (
         <Box className={classes.root}>
@@ -98,7 +112,7 @@ export default function PluginItem(props: PluginItemProps) {
                         {onExplore ? <Explore onClick={() => onExplore(id)} /> : null}
                     </Box>
                 ) : null}
-                {id ? (
+                {!hideSwitch ? (
                     <SettingSwitch
                         size="small"
                         checked={enabled}

packages/dashboard/src/pages/Labs/index.tsx

@@ -21,7 +21,7 @@ import {
 import { useDashboardI18N } from '../../locales'
 import MarketTrendSettingDialog from './components/MarketTrendSettingDialog'
 import { useAccount } from '@masknet/web3-shared-evm'
-import { Services, PluginMessages } from '../../API'
+import { Messages, Services, PluginMessages } from '../../API'
 import { useRemoteControlledDialog } from '@masknet/shared'
 import { TUTORIAL_URLS_EN } from './constants'
 import { ContentContainer } from '../../components/ContentContainer'
@@ -71,6 +71,14 @@ export default function Plugins() {
         [PluginId.PoolTogether]: true,
     })
 
+    useEffect(
+        () =>
+            Messages.events.pluginMinimalModeChanged.on(([id, newValue]) =>
+                setPluginStatus({ ...pluginStatus, [id]: newValue }),
+            ),
+        [pluginStatus],
+    )
+
     const plugins = [
         {
             id: PluginId.RedPacket,
@@ -107,13 +115,15 @@ export default function Plugins() {
             icon: <SwapServiceIcon />,
             enabled: pluginStatus[PluginId.Trader],
             setting: true,
+            hideSwitch: true,
         },
         {
             id: PluginId.Transak,
             title: t.labs_transak(),
             desc: t.labs_transak_desc(),
             icon: <TransakIcon />,
             enabled: pluginStatus[PluginId.Transak],
+            hideSwitch: true,
         },
         {
             id: PluginId.Collectible,
@@ -189,7 +199,7 @@ export default function Plugins() {
     const { openDialog: openSwapDialog } = useRemoteControlledDialog(PluginMessages.Swap.swapDialogUpdated)
 
     async function onSwitch(id: string, checked: boolean) {
-        await Services.Settings.setPluginEnabled(id, checked)
+        await Services.Settings.setPluginMinimalModeEnabled(id, !checked)
         setPluginStatus({ ...pluginStatus, [id]: checked })
     }
 
@@ -215,7 +225,7 @@ export default function Plugins() {
 
     useEffect(() => {
         Object.values(PluginId).forEach(async (id) => {
-            const enabled = await Services.Settings.getPluginEnabled(id)
+            const enabled = await Services.Settings.getPluginMinimalModeEnabled(id)
             setPluginStatus((status) => ({ ...status, [id]: enabled }))
         })
     }, [])
@@ -247,6 +257,7 @@ export default function Plugins() {
                             onSwitch={onSwitch}
                             onTutorial={onTutorial}
                             onSetting={p.setting ? onSetting : undefined}
+                            hideSwitch={p.hideSwitch}
                         />
                     ))}
                 </Box>

packages/mask/shared-ui/locales/en-US.json

@@ -91,6 +91,8 @@
     "user_guide_tip_2": "Click here to have a quick start.",
     "create_persona": "Create persona",
     "connect_persona": "Connect persona",
+    "please_create_persona": "Please create persona",
+    "please_connect_persona": "Please connect persona",
     "mask_network": "Mask Network",
     "import": "Import",
     "no_search_result": "No result",
@@ -174,6 +176,7 @@
     "wallet_search_no_result": "No results.",
     "wallet_confirm_with_password": "Confirm with password",
     "wallet_airdrop_nft_unclaimed_title": "NFT Airdrop Unclaimed:",
+    "plugin_not_enabled": "{{plugin}} (Not Enabled)",
     "plugin_external_unknown_plugin": "New unknown Mask plugins found. Do you want to load them?",
     "plugin_external_loader_search_holder": "Search for an external plugin",
     "plugin_external_loader_search_button": "Search for plugin",

packages/mask/src/components/CompositionDialog/BadgeRenderer.tsx

@@ -18,7 +18,7 @@ export interface BadgeRendererProps {
 }
 
 export function BadgeRenderer({ meta, onDeleteMeta, readonly }: BadgeRendererProps) {
-    const plugins = useActivatedPluginsSNSAdaptor()
+    const plugins = useActivatedPluginsSNSAdaptor('any')
     const i18n = usePluginI18NField()
     const { t } = useI18N()
     if (!meta) return null

packages/mask/src/components/CompositionDialog/PluginEntryRender.tsx

@@ -29,7 +29,7 @@ export const PluginEntryRender = memo(
         const chainId = useChainId()
         const pluginID = usePluginIDContext()
         const operatingSupportedChainMapping = useActivatedPluginSNSAdaptor_Web3Supported(chainId, pluginID)
-        const result = [...useActivatedPluginsSNSAdaptor()]
+        const result = [...useActivatedPluginsSNSAdaptor('any')]
             .sort((plugin) => {
                 // TODO: support priority order
                 if (plugin.ID === RedPacketPluginID || plugin.ID === ITO_PluginID) return -1

packages/mask/src/components/DataSource/usePersonaConnectStatus.ts

@@ -0,0 +1,39 @@
+import { DashboardRoutes, ProfileIdentifier } from '@masknet/shared-base'
+import stringify from 'json-stable-stringify'
+import { useMemo } from 'react'
+import Services from '../../extension/service'
+import { currentSetupGuideStatus } from '../../settings/settings'
+import { activatedSocialNetworkUI } from '../../social-network'
+import { SetupGuideStep } from '../InjectedComponents/SetupGuide'
+import { useLastRecognizedIdentity } from './useActivatedUI'
+import { useMyPersonas } from './useMyPersonas'
+
+const createPersona = () => {
+    Services.Welcome.openOptionsPage(DashboardRoutes.Setup)
+}
+
+const connectPersona = async () => {
+    const currentPersonaIdentifier = await Services.Settings.getCurrentPersonaIdentifier()
+    currentSetupGuideStatus[activatedSocialNetworkUI.networkIdentifier].value = stringify({
+        status: SetupGuideStep.FindUsername,
+        persona: currentPersonaIdentifier?.toText(),
+    })
+}
+
+export function usePersonaConnectStatus() {
+    const personas = useMyPersonas()
+    const lastRecognized = useLastRecognizedIdentity()
+
+    return useMemo(() => {
+        const id = new ProfileIdentifier(activatedSocialNetworkUI.networkIdentifier, lastRecognized.identifier.userId)
+        let connected = false
+        personas.forEach((p) => {
+            p.identifier
+            if (p.linkedProfiles.get(id)) {
+                connected = true
+            }
+        })
+        const action = !personas.length ? createPersona : !connected ? connectPersona : null
+        return { connected, action, hasPersona: !!personas.length }
+    }, [personas, lastRecognized, activatedSocialNetworkUI])
+}

packages/mask/src/components/InjectedComponents/DecryptedPost/DecryptPostFailed.tsx

@@ -1,11 +1,12 @@
 import { memo } from 'react'
 import { useI18N } from '../../../utils'
 import { AdditionalContent, AdditionalContentProps } from '../AdditionalPostContent'
-import { NotSetupYetPrompt } from '../../shared/NotSetupYetPrompt'
 import type { BannerProps } from '../../Welcomes/Banner'
 import { DecryptFailedReason } from '../../../utils/constants'
 import type { ProfileIdentifier } from '@masknet/shared-base'
 import { wrapAuthorDifferentMessage } from './authorDifferentMessage'
+import MaskPluginWrapper from '../../../plugins/MaskPluginWrapper'
+
 export interface DecryptPostFailedProps {
     error: Error
     AdditionalContentProps?: Partial<AdditionalContentProps>
@@ -16,10 +17,12 @@ export interface DecryptPostFailedProps {
     postedBy?: ProfileIdentifier
 }
 export const DecryptPostFailed = memo(function DecryptPostFailed(props: DecryptPostFailedProps) {
-    const { AdditionalContentProps, NotSetupYetPromptProps, author, postedBy, error } = props
+    const { AdditionalContentProps, author, postedBy, error } = props
     const { t } = useI18N()
-    if (error?.message === DecryptFailedReason.MyCryptoKeyNotFound)
-        return <NotSetupYetPrompt {...NotSetupYetPromptProps} description="decryptPostFailed" />
+
+    if (error?.message === DecryptFailedReason.MyCryptoKeyNotFound) {
+        return <MaskPluginWrapper pluginName="" />
+    }
     return (
         <AdditionalContent
             title={t('service_decryption_failed')}

packages/mask/src/components/InjectedComponents/DecryptedPost/DecryptedPostSuccess.tsx

@@ -5,11 +5,33 @@ import { useShareMenu } from '../SelectPeopleDialog'
 import { makeStyles, useStylesExtends } from '@masknet/theme'
 import { Link } from '@mui/material'
 import type { Profile } from '../../../database'
+import { extractTextFromTypedMessage } from '@masknet/shared-base'
 import type { TypedMessage, ProfileIdentifier } from '@masknet/shared-base'
 import { wrapAuthorDifferentMessage } from './authorDifferentMessage'
 import { createInjectHooksRenderer, useActivatedPluginsSNSAdaptor } from '@masknet/plugin-infra'
+import type { MetadataRendererProps } from '../TypedMessageRenderer'
+import {
+    useDisabledPluginSuggestionFromMeta,
+    useDisabledPluginSuggestionFromPost,
+    PossiblePluginSuggestionUI,
+} from '../DisabledPluginSuggestion'
 
-const PluginRenderer = createInjectHooksRenderer(useActivatedPluginsSNSAdaptor, (x) => x.DecryptedInspector)
+const PluginRenderer = createInjectHooksRenderer(
+    useActivatedPluginsSNSAdaptor.visibility.useNotMinimalMode,
+    (x) => x.DecryptedInspector,
+)
+function PluginRendererWithSuggestion(props: MetadataRendererProps) {
+    const a = useDisabledPluginSuggestionFromMeta(props.metadata || new Map())
+    const b = useDisabledPluginSuggestionFromPost(extractTextFromTypedMessage(props.message), [])
+
+    const suggest = Array.from(new Set(a.concat(b)))
+    return (
+        <>
+            <PossiblePluginSuggestionUI plugins={suggest} />
+            <PluginRenderer {...props} />
+        </>
+    )
+}
 export interface DecryptPostSuccessProps extends withClasses<never> {
     data: { content: TypedMessage }
     requestAppendRecipients?(to: Profile[]): Promise<void>
@@ -55,7 +77,7 @@ export const DecryptPostSuccess = memo(function DecryptPostSuccess(props: Decryp
         <>
             {shareMenu.ShareMenu}
             <AdditionalContent
-                metadataRenderer={{ after: PluginRenderer }}
+                metadataRenderer={{ after: PluginRendererWithSuggestion }}
                 headerActions={wrapAuthorDifferentMessage(author, postedBy, rightActions)}
                 title={t('decrypted_postbox_title')}
                 message={content}

packages/mask/src/components/InjectedComponents/DisabledPluginSuggestion.tsx

@@ -0,0 +1,72 @@
+import {
+    useActivatedPluginsSNSAdaptor,
+    registeredPlugins,
+    usePostInfoDetails,
+    Result,
+    Plugin,
+} from '@masknet/plugin-infra'
+import { extractTextFromTypedMessage } from '@masknet/shared-base'
+import { Switch } from '@mui/material'
+import Services from '../../extension/service'
+import MaskPluginWrapper from '../../plugins/MaskPluginWrapper'
+import { useI18N } from '../../utils'
+
+function useDisabledPlugins() {
+    const activated = new Set(useActivatedPluginsSNSAdaptor('any').map((x) => x.ID))
+    const minimalMode = new Set(useActivatedPluginsSNSAdaptor(true).map((x) => x.ID))
+    const disabledPlugins = [...registeredPlugins].filter((x) => !activated.has(x.ID) || minimalMode.has(x.ID))
+    return disabledPlugins
+}
+
+export function useDisabledPluginSuggestionFromPost(postContent: Result<string, any>, metaLinks: string[]) {
+    const disabled = useDisabledPlugins().filter((x) => x.contribution?.postContent)
+
+    const { ok, val } = postContent
+    const matches = disabled.filter((x) => {
+        for (const pattern of x.contribution!.postContent!) {
+            if (ok && val.match(pattern)) return true
+            if (metaLinks.some((link) => link.match(pattern))) return true
+        }
+        return false
+    })
+    return matches
+}
+
+export function useDisabledPluginSuggestionFromMeta(meta: ReadonlyMap<string, unknown>) {
+    const disabled = useDisabledPlugins().filter((x) => x.contribution?.metadataKeys)
+    const keys = [...meta.keys()]
+
+    const matches = disabled.filter((x) => {
+        const contributes = x.contribution!.metadataKeys!
+        return keys.some((key) => contributes.has(key))
+    })
+    return matches
+}
+
+export function PossiblePluginSuggestionPostInspector() {
+    const message = extractTextFromTypedMessage(usePostInfoDetails.rawMessage())
+    const metaLinks = usePostInfoDetails.postMetadataMentionedLinks().concat(usePostInfoDetails.mentionedLinks())
+    const matches = useDisabledPluginSuggestionFromPost(message, metaLinks)
+    return <PossiblePluginSuggestionUI plugins={matches} />
+}
+export function PossiblePluginSuggestionUI(props: { plugins: Plugin.DeferredDefinition[] }) {
+    const { t } = useI18N()
+    const { plugins } = props
+    if (!plugins.length) return null
+    return (
+        <>
+            {plugins.map((x) => (
+                <MaskPluginWrapper
+                    key={x.ID}
+                    pluginName={t('plugin_not_enabled', { plugin: x.name.fallback })}
+                    action={
+                        <Switch
+                            sx={{ marginRight: '-12px' }}
+                            onChange={() => Services.Settings.setPluginMinimalModeEnabled(x.ID, false)}
+                        />
+                    }
+                />
+            ))}
+        </>
+    )
+}

packages/mask/src/components/InjectedComponents/PageInspector.tsx

@@ -5,7 +5,10 @@ import { createInjectHooksRenderer, useActivatedPluginsSNSAdaptor } from '@maskn
 import { useMatchXS, MaskMessages, useI18N } from '../../utils'
 import { useAutoPasteFailedDialog } from './AutoPasteFailedDialog'
 
-const PluginRender = createInjectHooksRenderer(useActivatedPluginsSNSAdaptor, (x) => x.GlobalInjection)
+const PluginRender = createInjectHooksRenderer(
+    useActivatedPluginsSNSAdaptor.visibility.useAnyMode,
+    (x) => x.GlobalInjection,
+)
 
 export interface PageInspectorProps {}
 

packages/mask/src/components/InjectedComponents/PostInspector.tsx

@@ -17,8 +17,12 @@ import { DebugList } from '../DebugModeUI/DebugList'
 import { usePostInfoDetails } from '../DataSource/usePostInfo'
 import { decodePublicKeyUI } from '../../social-network/utils/text-payload-ui'
 import { createInjectHooksRenderer, useActivatedPluginsSNSAdaptor } from '@masknet/plugin-infra'
+import { PossiblePluginSuggestionPostInspector } from './DisabledPluginSuggestion'
 
-const PluginHooksRenderer = createInjectHooksRenderer(useActivatedPluginsSNSAdaptor, (plugin) => plugin.PostInspector)
+const PluginHooksRenderer = createInjectHooksRenderer(
+    useActivatedPluginsSNSAdaptor.visibility.useNotMinimalMode,
+    (plugin) => plugin.PostInspector,
+)
 
 export interface PostInspectorProps {
     onDecrypted(post: TypedMessageTuple): void
@@ -119,6 +123,7 @@ export function PostInspector(props: PostInspectorProps) {
                 ) : null}
                 {props.slotPosition !== 'after' && slot}
                 {x}
+                <PossiblePluginSuggestionPostInspector />
                 <PluginHooksRenderer />
                 {debugInfo}
                 {props.slotPosition !== 'before' && slot}

packages/mask/src/components/InjectedComponents/PostReplacer.tsx

@@ -29,7 +29,7 @@ export function PostReplacer(props: PostReplacerProps) {
     const postPayload = usePostInfoDetails.containingMaskPayload()
     const allPostReplacement = useValueRef(allPostReplacementSettings)
 
-    const plugins = useActivatedPluginsSNSAdaptor()
+    const plugins = useActivatedPluginsSNSAdaptor(false)
     const processedPostMessage = useMemo(
         () =>
             plugins.reduce((x, plugin) => {