feat: mf-6146 merge lens/farcaster badges (#11931)

cspell.json

@@ -236,5 +236,6 @@
     ],
     "ignoreRegExpList": ["/[A-Za-z0-9]{44}/", "/[A-Za-z0-9]{46}/", "/[A-Za-z0-9]{59}/"],
     "overrides": [],
-    "words": []
+    "words": ["endregion"]
 }
+

packages/mask/content-script/site-adaptor-infra/ui.ts

@@ -96,9 +96,7 @@ export async function activateSiteAdaptorUIInner(ui_deferred: SiteAdaptorUI.Defe
     ui.injection.userAvatar?.(signal)
     ui.injection.profileAvatar?.(signal)
     ui.injection.tips?.(signal)
-    ui.injection.nameWidget?.(signal)
-    ui.injection.farcaster?.(signal)
-    ui.injection.lens?.(signal)
+    ui.injection.badges?.(signal)
 
     ui.injection.enhancedProfileNFTAvatar?.(signal)
     ui.injection.openNFTAvatar?.(signal)

packages/mask/content-script/site-adaptors/twitter.com/injection/Badges/index.tsx

@@ -0,0 +1,13 @@
+import { injectBadgesOnConversation } from './injectBadgesOnConversation.js'
+import { injectBadgesOnPost } from './injectBadgesOnPost.js'
+import { injectBadgesOnProfile } from './injectBadgesOnProfile.js'
+import { injectBadgesOnSpaceDock } from './injectBadgesOnSpaceDock.js'
+import { injectBadgesOnUserCell } from './injectBadgesOnUserCell.js'
+
+export function injectBadges(signal: AbortSignal) {
+    injectBadgesOnProfile(signal)
+    injectBadgesOnPost(signal)
+    injectBadgesOnUserCell(signal)
+    injectBadgesOnConversation(signal)
+    injectBadgesOnSpaceDock(signal)
+}

packages/mask/content-script/site-adaptors/twitter.com/injection/Farcaster/injectFarcasterOnConversation.tsx → packages/mask/content-script/site-adaptors/twitter.com/injection/Badges/injectBadgesOnConversation.tsx

@@ -42,14 +42,14 @@ function createRootElement() {
     return span
 }
 
-const ConversationFarcasterSlot = memo(function ConversationFarcasterSlot({ userId }: Props) {
+const ConversationBadgesSlot = memo(function ConversationBadgesSlot({ userId }: Props) {
     const [disabled, setDisabled] = useState(true)
     const { classes, cx } = useStyles()
 
     const component = useMemo(() => {
         const Component = createInjectHooksRenderer(
             useActivatedPluginsSiteAdaptor.visibility.useNotMinimalMode,
-            (plugin) => plugin.Farcaster?.UI?.Content,
+            (plugin) => plugin.Badges?.UI?.Content,
             undefined,
             createRootElement,
         )
@@ -59,7 +59,7 @@ const ConversationFarcasterSlot = memo(function ConversationFarcasterSlot({ user
         return (
             <Component
                 identity={identifier}
-                slot={Plugin.SiteAdaptor.FarcasterSlot.Sidebar}
+                slot={Plugin.SiteAdaptor.BadgesSlot.Sidebar}
                 onStatusUpdate={setDisabled}
             />
         )
@@ -73,7 +73,7 @@ const ConversationFarcasterSlot = memo(function ConversationFarcasterSlot({ user
 /**
  * Inject on conversation, including both DM drawer and message page (/messages/xxx)
  */
-export function injectFarcasterOnConversation(signal: AbortSignal) {
+export function injectBadgesOnConversation(signal: AbortSignal) {
     const watcher = new MutationObserverWatcher(selector())
     startWatch(watcher, signal)
     watcher.useForeach((node, _, proxy) => {
@@ -90,7 +90,7 @@ export function injectFarcasterOnConversation(signal: AbortSignal) {
         }, '')
         if (!userId) return
         attachReactTreeWithContainer(proxy.afterShadow, { signal, untilVisible: true }).render(
-            <ConversationFarcasterSlot userId={userId} />,
+            <ConversationBadgesSlot userId={userId} />,
         )
     })
 }

packages/mask/content-script/site-adaptors/twitter.com/injection/Lens/injectLensOnPost.tsx → packages/mask/content-script/site-adaptors/twitter.com/injection/Badges/injectBadgesOnPost.tsx

@@ -14,7 +14,7 @@ function selector() {
 }
 
 // structure: <user-name> <user-id> <timestamp>
-export function injectLensOnPost(signal: AbortSignal) {
+export function injectBadgesOnPost(signal: AbortSignal) {
     const watcher = new MutationObserverWatcher(selector())
     startWatch(watcher, signal)
     watcher.useForeach((node, _, proxy) => {
@@ -26,7 +26,7 @@ export function injectLensOnPost(signal: AbortSignal) {
         const userId = href?.split('/')[1]
         if (!userId) return
         attachReactTreeWithContainer(proxy.afterShadow, { signal, untilVisible: true }).render(
-            <PostLensSlot userId={userId} />,
+            <PostBadgesSlot userId={userId} />,
         )
     })
 }
@@ -58,21 +58,23 @@ function createRootElement() {
     })
     return span
 }
-function PostLensSlot({ userId }: Props) {
+function PostBadgesSlot({ userId }: Props) {
     const [disabled, setDisabled] = useState(true)
     const { classes, cx } = useStyles()
 
     const component = useMemo(() => {
         const Component = createInjectHooksRenderer(
             useActivatedPluginsSiteAdaptor.visibility.useNotMinimalMode,
-            (plugin) => plugin.Lens?.UI?.Content,
+            (plugin) => plugin.Badges?.UI?.Content,
             undefined,
             createRootElement,
         )
         const identifier = ProfileIdentifier.of(EnhanceableSite.Twitter, userId).unwrap()
         if (!identifier) return null
 
-        return <Component identity={identifier} slot={Plugin.SiteAdaptor.LensSlot.Post} onStatusUpdate={setDisabled} />
+        return (
+            <Component identity={identifier} slot={Plugin.SiteAdaptor.BadgesSlot.Post} onStatusUpdate={setDisabled} />
+        )
     }, [userId])
 
     if (!component) return null

packages/mask/content-script/site-adaptors/twitter.com/injection/Lens/injectLensOnProfile.tsx → packages/mask/content-script/site-adaptors/twitter.com/injection/Badges/injectBadgesOnProfile.tsx

@@ -11,10 +11,10 @@ function selector() {
     return querySelector<HTMLElement>('[data-testid=UserName] div[dir]')
 }
 
-export function injectLensOnProfile(signal: AbortSignal) {
+export function injectBadgesOnProfile(signal: AbortSignal) {
     const watcher = new MutationObserverWatcher(selector())
     startWatch(watcher, signal)
-    attachReactTreeWithContainer(watcher.firstDOMProxy.afterShadow, { signal }).render(<ProfileLensSlot />)
+    attachReactTreeWithContainer(watcher.firstDOMProxy.afterShadow, { signal }).render(<ProfileBadgesSlot />)
 }
 
 const useStyles = makeStyles()((theme) => ({
@@ -32,21 +32,21 @@ const useStyles = makeStyles()((theme) => ({
     },
 }))
 
-function ProfileLensSlot() {
+function ProfileBadgesSlot() {
     const visitingIdentity = useCurrentVisitingIdentity()
     const [disabled, setDisabled] = useState(true)
     const { classes, cx } = useStyles()
 
     const component = useMemo(() => {
         const Component = createInjectHooksRenderer(
             useActivatedPluginsSiteAdaptor.visibility.useNotMinimalMode,
-            (plugin) => plugin.Lens?.UI?.Content,
+            (plugin) => plugin.Badges?.UI?.Content,
         )
 
         return (
             <Component
                 identity={visitingIdentity.identifier}
-                slot={Plugin.SiteAdaptor.LensSlot.ProfileName}
+                slot={Plugin.SiteAdaptor.BadgesSlot.ProfileName}
                 onStatusUpdate={setDisabled}
             />
         )

packages/mask/content-script/site-adaptors/twitter.com/injection/Farcaster/injectFarcasterOnSpaceDock.tsx → packages/mask/content-script/site-adaptors/twitter.com/injection/Badges/injectBadgesOnSpaceDock.tsx

@@ -19,7 +19,7 @@ function avatarSelector() {
 /**
  * Inject on space dock
  */
-export function injectFarcasterOnSpaceDock(signal: AbortSignal) {
+export function injectBadgesOnSpaceDock(signal: AbortSignal) {
     const watcher = new MutationObserverWatcher(avatarSelector())
     startWatch(watcher, signal)
     watcher.useForeach((node, _, proxy) => {
@@ -30,7 +30,7 @@ export function injectFarcasterOnSpaceDock(signal: AbortSignal) {
         const userId = avatar.dataset.testid?.slice('UserAvatar-Container-'.length)
         if (!userId) return
         attachReactTreeWithContainer(proxy.afterShadow, { signal, untilVisible: true }).render(
-            <SpaceDockFarcasterSlot userId={userId} />,
+            <SpaceDockBadgesSlot userId={userId} />,
         )
     })
 }
@@ -66,14 +66,14 @@ function createRootElement() {
     return span
 }
 
-function SpaceDockFarcasterSlot({ userId }: Props) {
+function SpaceDockBadgesSlot({ userId }: Props) {
     const [disabled, setDisabled] = useState(true)
     const { classes, cx } = useStyles()
 
     const component = useMemo(() => {
         const Component = createInjectHooksRenderer(
             useActivatedPluginsSiteAdaptor.visibility.useNotMinimalMode,
-            (plugin) => plugin.Farcaster?.UI?.Content,
+            (plugin) => plugin.Badges?.UI?.Content,
             undefined,
             createRootElement,
         )
@@ -83,7 +83,7 @@ function SpaceDockFarcasterSlot({ userId }: Props) {
         return (
             <Component
                 identity={identifier}
-                slot={Plugin.SiteAdaptor.FarcasterSlot.Sidebar}
+                slot={Plugin.SiteAdaptor.BadgesSlot.Sidebar}
                 onStatusUpdate={setDisabled}
             />
         )

packages/mask/content-script/site-adaptors/twitter.com/injection/Farcaster/injectFarcasterOnUserCell.tsx → packages/mask/content-script/site-adaptors/twitter.com/injection/Badges/injectBadgesOnUserCell.tsx

@@ -17,14 +17,14 @@ function selector() {
 /**
  * Inject on sidebar user cell
  */
-export function injectFarcasterOnUserCell(signal: AbortSignal) {
+export function injectBadgesOnUserCell(signal: AbortSignal) {
     const watcher = new MutationObserverWatcher(selector())
     startWatch(watcher, signal)
     watcher.useForeach((node, _, proxy) => {
         const userId = node.closest('[role=link]')?.getAttribute('href')?.slice(1)
         if (!userId) return
         // Intended to set `untilVisible` to true, but mostly user cells are fixed and visible
-        attachReactTreeWithContainer(proxy.afterShadow, { signal }).render(<UserCellFarcasterSlot userId={userId} />)
+        attachReactTreeWithContainer(proxy.afterShadow, { signal }).render(<UserCellBadgesSlot userId={userId} />)
     })
 }
 
@@ -59,14 +59,14 @@ function createRootElement() {
     return span
 }
 
-function UserCellFarcasterSlot({ userId }: Props) {
+function UserCellBadgesSlot({ userId }: Props) {
     const [disabled, setDisabled] = useState(true)
     const { classes, cx } = useStyles()
 
     const component = useMemo(() => {
         const Component = createInjectHooksRenderer(
             useActivatedPluginsSiteAdaptor.visibility.useNotMinimalMode,
-            (plugin) => plugin.Farcaster?.UI?.Content,
+            (plugin) => plugin.Badges?.UI?.Content,
             undefined,
             createRootElement,
         )
@@ -77,7 +77,7 @@ function UserCellFarcasterSlot({ userId }: Props) {
         return (
             <Component
                 identity={identifier}
-                slot={Plugin.SiteAdaptor.FarcasterSlot.Sidebar}
+                slot={Plugin.SiteAdaptor.BadgesSlot.Sidebar}
                 onStatusUpdate={setDisabled}
             />
         )