feat: mf-6084 verify persona with publish post api (#11489)

* feat: mf-6084 verify persona with publish post api

closes mf-6071

* fixup! feat: mf-6084 verify persona with publish post api

packages/mask/content-script/components/InjectedComponents/SetupGuide/AccountConnectStatus.tsx

@@ -1,13 +1,12 @@
 import { Icons } from '@masknet/icons'
-import { LoadingStatus, SOCIAL_MEDIA_ROUND_ICON_MAPPING } from '@masknet/shared'
+import { BindingDialog, LoadingStatus, SOCIAL_MEDIA_ROUND_ICON_MAPPING, type BindingDialogProps } from '@masknet/shared'
 import { SOCIAL_MEDIA_NAME } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
 import { Box, Button, Typography } from '@mui/material'
 import { memo } from 'react'
 import { Trans } from 'react-i18next'
 import { activatedSiteAdaptorUI } from '../../../site-adaptor-infra/ui.js'
 import { useMaskSharedTrans } from '../../../../shared-ui/index.js'
-import { BindingDialog, type BindingDialogProps } from './BindingDialog.js'
 import { SetupGuideContext } from './SetupGuideContext.js'
 
 const useStyles = makeStyles()((theme) => {

packages/mask/content-script/components/InjectedComponents/SetupGuide/CheckConnection.tsx

@@ -1,5 +1,5 @@
+import type { BindingDialogProps } from '@masknet/shared'
 import { AccountConnectStatus } from './AccountConnectStatus.js'
-import type { BindingDialogProps } from './BindingDialog.js'
 import { SetupGuideContext } from './SetupGuideContext.js'
 
 export function CheckConnection({ onClose }: BindingDialogProps) {

packages/mask/content-script/components/InjectedComponents/SetupGuide/VerifyNextID.tsx

@@ -1,7 +1,19 @@
 import { Icons } from '@masknet/icons'
 import { delay } from '@masknet/kit'
-import { EmojiAvatar } from '@masknet/shared'
-import { MaskMessages, currentSetupGuideStatus, formatPersonaFingerprint } from '@masknet/shared-base'
+import {
+    BindingDialog,
+    EmojiAvatar,
+    type BindingDialogProps,
+    useVerifyContent,
+    useBaseUIRuntime,
+    useVerifyNextID,
+} from '@masknet/shared'
+import {
+    MaskMessages,
+    currentSetupGuideStatus,
+    formatPersonaFingerprint,
+    resolveNetworkToNextIDPlatform,
+} from '@masknet/shared-base'
 import { ActionButton, MaskColorVar, MaskTextField, makeStyles } from '@masknet/theme'
 import { NextIDProof } from '@masknet/web3-providers'
 import { Telemetry } from '@masknet/web3-telemetry'
@@ -12,15 +24,11 @@ import { useCallback, useMemo, useState } from 'react'
 import { Trans } from 'react-i18next'
 import { useAsyncFn } from 'react-use'
 import Services from '../../../../shared-ui/service.js'
-import { activatedSiteAdaptorUI } from '../../../site-adaptor-infra/ui.js'
 import { useMaskSharedTrans } from '../../../../shared-ui/index.js'
-import { useNextIDVerify } from '../../DataSource/useNextIDVerify.js'
 import { AccountConnectStatus } from './AccountConnectStatus.js'
-import { BindingDialog, type BindingDialogProps } from './BindingDialog.js'
 import { SetupGuideContext } from './SetupGuideContext.js'
 import { useConnectPersona } from './hooks/useConnectPersona.js'
 import { useNotifyConnected } from './hooks/useNotifyConnected.js'
-import { usePostContent } from './hooks/usePostContent.js'
 
 const useStyles = makeStyles()((theme) => ({
     body: {
@@ -158,9 +166,12 @@ export function VerifyNextID({ onClose }: VerifyNextIDProps) {
     const personaIdentifier = personaInfo?.identifier
 
     const [customUserId, setCustomUserId] = useState('')
-    const { data: post, isPending: creatingPostContent } = usePostContent(personaIdentifier, userId || customUserId)
-    const { configuration, networkIdentifier } = activatedSiteAdaptorUI!
-    const nextIdPlatform = configuration.nextIDConfig?.platform
+    const { data: verifyInfo, isPending: creatingPostContent } = useVerifyContent(
+        personaIdentifier,
+        userId || customUserId,
+    )
+    const { networkIdentifier } = useBaseUIRuntime()
+    const nextIdPlatform = resolveNetworkToNextIDPlatform(networkIdentifier)
 
     const { data: personaAvatar } = useQuery({
         queryKey: ['@@my-own-persona-info'],
@@ -180,7 +191,7 @@ export function VerifyNextID({ onClose }: VerifyNextIDProps) {
     // Show connect result for the first time.
     const { loading: connecting } = useConnectPersona()
 
-    const [, handleVerifyNextID] = useNextIDVerify()
+    const [, handleVerifyNextID] = useVerifyNextID()
     const [{ loading: verifying, value: verifiedSuccess }, onVerify] = useAsyncFn(async () => {
         if (!userId) return
         if (!personaInfo) return
@@ -294,10 +305,10 @@ export function VerifyNextID({ onClose }: VerifyNextIDProps) {
                                 {t.setup_guide_verify_tip()}
                             </Typography>
                         </>
-                    : post ?
+                    : verifyInfo ?
                         <>
                             <Typography className={classes.postContentTitle}>{t.setup_guide_post_content()}</Typography>
-                            <Typography className={classes.postContent}>{post}</Typography>
+                            <Typography className={classes.postContent}>{verifyInfo.post}</Typography>
                             <Typography className={classes.tip} component="div">
                                 {t.setup_guide_verify_tip()}
                             </Typography>

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

@@ -153,6 +153,7 @@ export async function activateSiteAdaptorUIInner(ui_deferred: SiteAdaptorUI.Defe
         getPostIdFromNewPostToast: ui.configuration.nextIDConfig?.getPostIdFromNewPostToast,
         connectPersona,
         postMessage: ui.automation?.nativeCompositionDialog?.attachText,
+        publishPost: ui.automation.endpoint?.publishPost,
         getSearchedKeyword: ui.collecting.getSearchedKeyword,
         getUserIdentity: ui.utils.getUserIdentity,
     })

packages/mask/content-script/site-adaptors/twitter.com/collecting/post.ts

@@ -151,7 +151,7 @@ export const PostProviderTwitter: SiteAdaptorUI.CollectingCapabilities.PostsProv
 
 export function getPostIdFromNewPostToast() {
     const toastLinkNode = toastLinkSelector().evaluate()
-    return toastLinkNode?.href ? parseId(toastLinkNode?.href) : ''
+    return toastLinkNode?.href ? parseId(toastLinkNode.href) : ''
 }
 
 export function collectVerificationPost(keyword: string) {

packages/plugin-infra/src/site-adaptor/context.ts

@@ -16,6 +16,7 @@ export interface __SiteAdaptorContext__ {
     getUserIdentity: ((useId: string) => Promise<IdentityResolved | undefined>) | undefined
     getPostIdFromNewPostToast: (() => string) | undefined
     postMessage: ((text: string, options?: any) => Promise<void>) | undefined
+    publishPost: ((mediaObjects: Array<string | Blob>, options?: any) => Promise<string | null>) | undefined
     getSearchedKeyword: (() => string) | undefined
     connectPersona: () => Promise<void>
 }
@@ -29,6 +30,7 @@ export let share: __SiteAdaptorContext__['share']
 export let getUserIdentity: __SiteAdaptorContext__['getUserIdentity']
 export let getPostIdFromNewPostToast: __SiteAdaptorContext__['getPostIdFromNewPostToast']
 export let postMessage: __SiteAdaptorContext__['postMessage']
+export let publishPost: __SiteAdaptorContext__['publishPost']
 export let getSearchedKeyword: __SiteAdaptorContext__['getSearchedKeyword']
 export let connectPersona: __SiteAdaptorContext__['connectPersona']
 export function __setSiteAdaptorContext__(value: __SiteAdaptorContext__) {
@@ -43,6 +45,7 @@ export function __setSiteAdaptorContext__(value: __SiteAdaptorContext__) {
         getUserIdentity,
         getPostIdFromNewPostToast,
         postMessage,
+        publishPost,
         getSearchedKeyword,
         connectPersona,
     } = value)

packages/shared/src/UI/components/VerifyNextIDDialog/Modal.tsx

@@ -0,0 +1,26 @@
+import type { PersonaInformation, SingletonModalRefCreator } from '@masknet/shared-base'
+import { forwardRef, useState } from 'react'
+import { VerifyNextIDDialog, type VerifyNextIDDialogCloseProps, type VerifyNextIDDialogProps } from './index.js'
+import { useSingletonModal } from '@masknet/shared-base-ui'
+
+export const VerifyNextIDModal = forwardRef<
+    SingletonModalRefCreator<VerifyNextIDDialogProps, VerifyNextIDDialogCloseProps>
+>(function VerifyNextIDModal(props, ref) {
+    const [personaInfo, setPersonaInfo] = useState<PersonaInformation>()
+    const [open, dispatch] = useSingletonModal(ref, {
+        onOpen(props) {
+            setPersonaInfo(props.personaInfo)
+        },
+    })
+    if (!open || !personaInfo) return null
+    return (
+        <VerifyNextIDDialog
+            personaInfo={personaInfo}
+            onClose={() => dispatch?.close({ aborted: true })}
+            onSentPost={(res) => {
+                if (!dispatch || !res) return
+                dispatch.close(res)
+            }}
+        />
+    )
+})