fix: mf-6533 hide payload image for redpacket only (#12027)

* fix: mf-6533 hide payload image for redpacket only

* fixup! fix: mf-6533 hide payload image for redpacket only

* fix: mf-6495 hide tab content for facebook

packages/mask/content-script/components/CompositionDialog/useSubmit.ts

@@ -1,6 +1,6 @@
 import Services from '#services'
 import { encodeByNetwork } from '@masknet/encryption'
-import { PluginID, Sniffings, SOCIAL_MEDIA_NAME } from '@masknet/shared-base'
+import { PluginID, RedPacketMetaKey, RedPacketNftMetaKey, Sniffings, SOCIAL_MEDIA_NAME } from '@masknet/shared-base'
 import type { Meta } from '@masknet/typed-message'
 import { Telemetry } from '@masknet/web3-telemetry'
 import { EventID, EventType } from '@masknet/web3-telemetry/types'
@@ -66,7 +66,7 @@ export function useSubmit(onClose: () => void, reason: 'timeline' | 'popup' | 'r
                 })
             }
 
-            if (content.meta?.has(`${PluginID.RedPacket}:1`) || content.meta?.has(`${PluginID.RedPacket}_nft:1`))
+            if (content.meta?.has(RedPacketMetaKey) || content.meta?.has(RedPacketNftMetaKey))
                 Telemetry.captureEvent(EventType.Interact, EventID.EntryAppLuckSend)
             Telemetry.captureEvent(EventType.Interact, EventID.EntryMaskComposeEncrypt)
 
@@ -82,11 +82,11 @@ function decorateEncryptedText(encrypted: string, _: I18nContext['_'], meta?: Me
     if (!meta) return null
     const hasOfficialAccount = Sniffings.is_twitter_page || Sniffings.is_facebook_page
     const officialAccount = Sniffings.is_twitter_page ? _(msg`realMaskNetwork`) : _(msg`masknetwork`)
-    const token = meta.has(`${PluginID.RedPacket}:1`) ? _(msg`a token`) : _(msg`an NFT`)
+    const token = meta.has(RedPacketMetaKey) ? _(msg`a token`) : _(msg`an NFT`)
     const sns = SOCIAL_MEDIA_NAME[activatedSiteAdaptorUI!.networkIdentifier]
 
     // Note: since this is in the composition stage, we can assume plugins don't insert old version of meta.
-    if (meta.has(`${PluginID.RedPacket}:1`) || meta.has(`${PluginID.RedPacket}_nft:1`)) {
+    if (meta.has(RedPacketMetaKey) || meta.has(RedPacketNftMetaKey)) {
         const promote_red_packet = _(msg`Hi friends, I just created ${token} Lucky Drop. Download Mask.io to claim.`)
         const promote_red_packet2 = _(msg`🧧🧧🧧 Try sending Lucky Drop to your friends with Mask.io.`)
         return hasOfficialAccount ?

packages/mask/content-script/components/InjectedComponents/DecryptedPost/DecryptedPost.tsx

@@ -1,6 +1,6 @@
-import { Fragment, useContext, useEffect, useReducer } from 'react'
+import { Fragment, useContext, useEffect, useReducer, type Dispatch, type SetStateAction } from 'react'
 import { extractTextFromTypedMessage, isTypedMessageEqual, type TypedMessage } from '@masknet/typed-message'
-import type { ProfileIdentifier } from '@masknet/shared-base'
+import { RedPacketMetaKey, RedPacketNftMetaKey, type ProfileIdentifier } from '@masknet/shared-base'
 
 import Services, { GeneratorServices } from '#services'
 import type { DecryptionProgress, FailureDecryption, SuccessDecryption } from './types.js'
@@ -13,7 +13,7 @@ import type { DecryptionContext, EncodedPayload } from '../../../../background/s
 import { DecryptIntermediateProgressKind, DecryptProgressKind } from '@masknet/encryption'
 import { type PostContext, usePostInfoDetails, PostInfoContext } from '@masknet/plugin-infra/content-script'
 import { Some } from 'ts-results-es'
-import { uniq, uniqWith } from 'lodash-es'
+import { uniqWith } from 'lodash-es'
 
 type PossibleProgress = SuccessDecryption | FailureDecryption | DecryptionProgress
 
@@ -50,8 +50,7 @@ function progressReducer(
 
 interface DecryptPostProps {
     whoAmI: ProfileIdentifier | null
-    imageDecryptedResults: string[]
-    onImageDecrypted: (decryptedResults: string[]) => void
+    onImageDecrypted: Dispatch<SetStateAction<string[]>>
 }
 function isProgressEqual(a: PossibleProgress, b: PossibleProgress) {
     if (a.type !== b.type) return false
@@ -62,7 +61,7 @@ function isProgressEqual(a: PossibleProgress, b: PossibleProgress) {
     safeUnreachable(a)
     return false
 }
-export function DecryptPost({ whoAmI, imageDecryptedResults, onImageDecrypted }: DecryptPostProps) {
+export function DecryptPost({ whoAmI, onImageDecrypted }: DecryptPostProps) {
     const deconstructedPayload = usePostInfoDetails.hasMaskPayload()
     const currentPostBy = usePostInfoDetails.author()
     // TODO: we should read this from the payload.
@@ -149,7 +148,11 @@ export function DecryptPost({ whoAmI, imageDecryptedResults, onImageDecrypted }:
                             iv: encodeArrayBuffer(iv),
                         },
                     })
-                    onImageDecrypted(uniq([...imageDecryptedResults, url]))
+                    if (!message.meta) return
+                    // For now, we only care about RedPacket payload
+                    if (message.meta.has(RedPacketMetaKey) || message.meta.has(RedPacketNftMetaKey)) {
+                        onImageDecrypted((images) => (images.includes(url) ? images : [...images, url]))
+                    }
                 },
                 postInfo.decryptedReport,
                 report(url),

packages/mask/content-script/components/InjectedComponents/PostInspector.tsx

@@ -38,11 +38,7 @@ export function PostInspector(props: PostInspectorProps) {
     if (hasEncryptedPost || postImages.length) {
         if (!isDebugging) props.zipPost({ imageDecryptedResults })
         return withAdditionalContent(
-            <DecryptPost
-                whoAmI={whoAmI?.identifier || null}
-                imageDecryptedResults={imageDecryptedResults}
-                onImageDecrypted={setImageDecryptedResults}
-            />,
+            <DecryptPost whoAmI={whoAmI?.identifier || null} onImageDecrypted={setImageDecryptedResults} />,
         )
     }
     return withAdditionalContent(null)

packages/mask/content-script/components/InjectedComponents/ProfileTabContent.tsx

@@ -392,6 +392,7 @@ function Content(props: ProfileTabContentProps) {
 
     // Maybe should merge in NextIdPage
     if (socialAccounts.length === 0 && !showNextID && !isOnTwitter) {
+        if (Sniffings.is_facebook_page) return null
         return (
             <ThemeProvider theme={MaskLightTheme}>
                 <div className={classes.root}>

packages/mask/content-script/site-adaptors/facebook.com/injection/ProfileTab.tsx

@@ -41,7 +41,8 @@ const useStyles = makeStyles()((theme) => {
                 cursor: 'pointer',
             },
             height: props.height,
-            display: 'flex',
+            display: 'inline-flex',
+            width: 80,
             flexDirection: 'column',
             alignContent: 'center',
             justifyContent: 'center',
@@ -54,6 +55,7 @@ const useStyles = makeStyles()((theme) => {
             position: 'relative',
             display: 'flex',
             minWidth: 56,
+            height: 52,
             justifyContent: 'center',
             alignItems: 'center',
             textAlign: 'center',
@@ -144,10 +146,12 @@ export function injectProfileTabAtFacebook(signal: AbortSignal) {
     const watcher = new MutationObserverWatcher(searchProfileTabSelector())
     startWatch(watcher, signal)
     attachReactTreeWithContainer(watcher.firstDOMProxy.afterShadow, { signal }).render(<ProfileTabAtFacebook />)
-
     const assign = () => {
         const web3Tab = web3TabSelector().evaluate()
-        if (web3Tab) web3Tab.style.float = 'left'
+        if (web3Tab) {
+            web3Tab.style.float = 'right'
+            web3Tab.style.marginRight = '15px'
+        }
     }
 
     new MutationObserverWatcher(web3TabSelector())

packages/mask/content-script/site-adaptors/facebook.com/ui-provider.ts

@@ -38,6 +38,7 @@ import { FacebookRenderFragments } from './customization/render-fragments.js'
 import { enableFbStyleTextPayloadReplace } from '../../../shared-ui/TypedMessageRender/transformer.js'
 import { injectFacebookProfileCover } from './injection/ProfileCover.js'
 import { injectAvatar } from './injection/Avatar/index.js'
+import { injectProfileTabAtFacebook } from './injection/ProfileTab.js'
 
 const useInjectedDialogClassesOverwriteFacebook = makeStyles()((theme) => {
     const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`
@@ -187,6 +188,7 @@ const facebookUI: SiteAdaptorUI.Definition = {
         pageInspector: injectPageInspectorDefault(),
         setupWizard: createTaskStartSetupGuideDefault(),
         toolbox: injectToolboxAtFacebook,
+        profileTab: injectProfileTabAtFacebook,
         profileTabContent: injectProfileTabContentAtFacebook,
         avatar: injectAvatar,
     },

packages/mask/content-script/site-adaptors/facebook.com/utils/selector.ts

@@ -115,7 +115,7 @@ export function profileTabSelectedSelector() {
 
 // for inserting web3 tab
 export function searchProfileTabSelector() {
-    return querySelector<E>('[role="tablist"] > div > div > :last-child')
+    return querySelector<E>('[role="tablist"] > div > div > [role="tab"]:last-of-type')
 }
 
 // for getting the inserted web3 tab

packages/plugins/RedPacket/src/SiteAdaptor/components/RedPacketActionButton.tsx

@@ -1,15 +1,15 @@
 import { Trans } from '@lingui/macro'
+import { RedPacketMetaKey } from '@masknet/shared-base'
 import { ActionButton, makeStyles, type ActionButtonProps } from '@masknet/theme'
 import { FireflyRedPacket } from '@masknet/web3-providers'
 import { FireflyRedPacketAPI } from '@masknet/web3-providers/types'
 import type { ChainId } from '@masknet/web3-shared-evm'
 import { useMediaQuery, type Theme } from '@mui/material'
 import { memo, useCallback, useContext } from 'react'
 import { useAsyncFn } from 'react-use'
-import { RedPacketMetaKey } from '../../constants.js'
+import { CompositionTypeContext } from '../contexts/CompositionTypeContext.js'
 import { useRefundCallback } from '../hooks/useRefundCallback.js'
 import { openComposition } from '../openComposition.js'
-import { CompositionTypeContext } from '../contexts/CompositionTypeContext.js'
 
 const useStyles = makeStyles()((theme) => {
     const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`

packages/plugins/RedPacket/src/SiteAdaptor/helpers.ts

@@ -1,9 +1,9 @@
+import { RedPacketMetaKey, RedPacketNftMetaKey } from '@masknet/shared-base'
 import { createRenderWithMetadata, createTypedMessageMetadataReader } from '@masknet/typed-message-react'
 import { EVMChainResolver } from '@masknet/web3-providers'
 import type { RedPacketJSONPayload, RedPacketNftJSONPayload } from '@masknet/web3-providers/types'
 import { ChainId } from '@masknet/web3-shared-evm'
 import { Ok, type Result } from 'ts-results-es'
-import { RedPacketMetaKey, RedPacketNftMetaKey } from '../constants.js'
 import schemaNtf from '../schema-nft.json' with { type: 'json' }
 import schema from '../schema.json' with { type: 'json' }
 

packages/plugins/RedPacket/src/SiteAdaptor/hooks/useHandleCreateOrSelect.ts

@@ -1,7 +1,6 @@
 import { t } from '@lingui/macro'
-import { RedPacketMetaKey } from '@masknet/plugin-redpacket'
 import { ApplicationBoardModal } from '@masknet/shared'
-import type { NetworkPluginID } from '@masknet/shared-base'
+import { RedPacketMetaKey, type NetworkPluginID } from '@masknet/shared-base'
 import { useChainContext } from '@masknet/web3-hooks-base'
 import { EVMWeb3 } from '@masknet/web3-providers'
 import type { FireflyRedPacketAPI, RedPacketJSONPayload } from '@masknet/web3-providers/types'

packages/plugins/RedPacket/src/SiteAdaptor/index.tsx

@@ -2,13 +2,13 @@ import { Trans } from '@lingui/macro'
 import { Icons } from '@masknet/icons'
 import { usePluginWrapper, type Plugin } from '@masknet/plugin-infra/content-script'
 import { ApplicationEntry } from '@masknet/shared'
+import { RedPacketMetaKey, RedPacketNftMetaKey } from '@masknet/shared-base'
 import type { RedPacketJSONPayload, RedPacketNftJSONPayload } from '@masknet/web3-providers/types'
 import { Telemetry } from '@masknet/web3-telemetry'
 import { EventID, EventType } from '@masknet/web3-telemetry/types'
 import { Typography } from '@mui/material'
 import { memo } from 'react'
 import { base } from '../base.js'
-import { RedPacketMetaKey, RedPacketNftMetaKey } from '../constants.js'
 import { RedPacketInPost } from './RedPacketInPost.js'
 import { RedPacketInjection } from './RedPacketInjection.js'
 import { RedPacketNftInPost } from './RedPacketNftInPost.js'

packages/plugins/RedPacket/src/SiteAdaptor/views/NftHistory.tsx

@@ -1,7 +1,7 @@
 import { Trans } from '@lingui/macro'
-import { RedPacketNftMetaKey, RoutePaths } from '@masknet/plugin-redpacket'
+import { RoutePaths } from '@masknet/plugin-redpacket'
 import { ApplicationBoardModal, EmptyStatus, LoadingStatus, NetworkTab } from '@masknet/shared'
-import { EMPTY_LIST, NetworkPluginID } from '@masknet/shared-base'
+import { EMPTY_LIST, NetworkPluginID, RedPacketNftMetaKey } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
 import { useChainContext, useNonFungibleCollections } from '@masknet/web3-hooks-base'
 import type { NftRedPacketJSONPayload } from '@masknet/web3-providers/types'

packages/plugins/RedPacket/src/SiteAdaptor/views/NftRedPacketConfirm.tsx

@@ -6,7 +6,7 @@ import {
     PluginWalletStatusBar,
     WalletConnectedBoundary,
 } from '@masknet/shared'
-import { NetworkPluginID } from '@masknet/shared-base'
+import { NetworkPluginID, RedPacketNftMetaKey } from '@masknet/shared-base'
 import { ActionButton, makeStyles } from '@masknet/theme'
 import { useChainContext, useWallet } from '@masknet/web3-hooks-base'
 import { EVMExplorerResolver, EVMWeb3 } from '@masknet/web3-providers'
@@ -22,7 +22,7 @@ import { Launch as LaunchIcon } from '@mui/icons-material'
 import { Box, Link, ListItem, Typography } from '@mui/material'
 import { memo, useCallback, useContext, useMemo, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { RedPacketNftMetaKey, RoutePaths } from '../../constants.js'
+import { RoutePaths } from '../../constants.js'
 import { RedPacketRPC } from '../../messages.js'
 import { useCreateNftRedpacketCallback } from '../hooks/useCreateNftRedpacketCallback.js'
 import { openComposition } from '../openComposition.js'

packages/plugins/RedPacket/src/base.ts

@@ -1,7 +1,14 @@
 import type { Plugin } from '@masknet/plugin-infra'
-import { DEFAULT_PLUGIN_PUBLISHER, EnhanceableSite, NetworkPluginID, getSiteType } from '@masknet/shared-base'
+import {
+    DEFAULT_PLUGIN_PUBLISHER,
+    EnhanceableSite,
+    NetworkPluginID,
+    RedPacketMetaKey,
+    RedPacketNftMetaKey,
+    getSiteType,
+} from '@masknet/shared-base'
 import { ChainId } from '@masknet/web3-shared-evm'
-import { RedPacketMetaKey, RedPacketNftMetaKey, RedPacketPluginID } from './constants.js'
+import { RedPacketPluginID } from './constants.js'
 import { languages } from './locale/languages.js'
 
 export const base = {

packages/plugins/RedPacket/src/constants.ts

@@ -2,13 +2,6 @@ import { PluginID } from '@masknet/shared-base'
 import type { FireflyRedPacketAPI } from '@masknet/web3-providers/types'
 import { ChainId } from '@masknet/web3-shared-evm'
 
-// Note: if the latest version has been changed, please update packages/mask/content-script/components/CompositionDialog/useSubmit.ts
-/**
- * !! Change this key cause a breaking change in the red packet plugin.
- * !! Please make sure it also be able to recognize the old key.
- */
-export const RedPacketMetaKey = `${PluginID.RedPacket}:1`
-export const RedPacketNftMetaKey = `${PluginID.RedPacket}_nft:1`
 /**
  * !! This ID is used to identify the stored plugin data. Change it will cause data lost.
  */

packages/shared-base/src/constants.ts

@@ -1,5 +1,6 @@
 import { NextIDPlatform } from './NextID/types.js'
 import { EnhanceableSite } from './Site/types.js'
+import { PluginID } from './types/PluginID.js'
 
 export const SOCIAL_MEDIA_NAME: Record<EnhanceableSite | string, string> = {
     [EnhanceableSite.Twitter]: 'X',
@@ -31,3 +32,10 @@ export const EMPTY_LIST = Object.freeze([]) as never[]
 export const EMPTY_OBJECT = Object.freeze({}) as Record<string, never>
 
 export const DEFAULT_PLUGIN_PUBLISHER = { name: { fallback: 'Mask Network' }, link: 'https://mask.io/' }
+
+/**
+ * !! Change this key cause a breaking change in the red packet plugin.
+ * !! Please make sure it also be able to recognize the old key.
+ */
+export const RedPacketMetaKey = `${PluginID.RedPacket}:1`
+export const RedPacketNftMetaKey = `${PluginID.RedPacket}_nft:1`