fix: mf-6639 the first connection or verification (#12140)

* fix: mf-6639 the first connection or verification

* fix: run codegen

---------

Co-authored-by: swkatmask <[email protected]>

Author: swkatmask

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

@@ -1,6 +1,6 @@
 import { Icons } from '@masknet/icons'
 import { BindingDialog, LoadingStatus, SOCIAL_MEDIA_ROUND_ICON_MAPPING, type BindingDialogProps } from '@masknet/shared'
-import { SOCIAL_MEDIA_NAME } from '@masknet/shared-base'
+import { Sniffings, SOCIAL_MEDIA_NAME } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
 import { Box, Button, Typography } from '@mui/material'
 import { memo } from 'react'
@@ -75,7 +75,7 @@ export const AccountConnectStatus = memo<Props>(function AccountConnectStatus({
     const site = activatedSiteAdaptorUI!.networkIdentifier
     const siteName = SOCIAL_MEDIA_NAME[site] || ''
 
-    const { connected } = SetupGuideContext.useContainer()
+    const { connected, isFirstConnection, isFirstVerification } = SetupGuideContext.useContainer()
 
     if (loading)
         return (
@@ -86,6 +86,35 @@ export const AccountConnectStatus = memo<Props>(function AccountConnectStatus({
             </Frame>
         )
 
+    if (isFirstConnection || isFirstVerification) {
+        if (Sniffings.is_twitter_page) {
+            return (
+                <Frame {...rest}>
+                    <Typography className={classes.text}>
+                        <Trans>Sent verification post successfully.</Trans>
+                    </Typography>
+                    <Typography className={classes.text} mt="1.5em">
+                        <Trans>
+                            You could check the verification result on Mask Pop-up after few minutes. If failed, try
+                            sending verification post again.
+                        </Trans>
+                    </Typography>
+                </Frame>
+            )
+        } else {
+            return (
+                <Frame {...rest}>
+                    <Typography className={classes.text}>
+                        <Trans>Connected successfully.</Trans>
+                    </Typography>
+                    <Typography className={classes.text} mt="1.5em">
+                        <Trans>Trying exploring more features powered by Mask Network.</Trans>
+                    </Typography>
+                </Frame>
+            )
+        }
+    }
+
     if (connected)
         return (
             <Frame {...rest}>

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

@@ -63,6 +63,7 @@ export function useSetupGuideStepInfo(persona?: PersonaIdentifier) {
     }, [userId])
 
     const [isFirstConnection, setIsFirstConnection] = useState(false)
+    const [isFirstVerification, setIsFirstVerification] = useState(false)
     const step = useMemo(() => {
         if (!setupGuide.status) {
             // Should show pin extension when not set
@@ -98,6 +99,8 @@ export function useSetupGuideStepInfo(persona?: PersonaIdentifier) {
         personaInfo,
         isFirstConnection,
         setIsFirstConnection,
+        isFirstVerification,
+        setIsFirstVerification,
         checkingConnected,
         checkingVerified,
         verified,

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

@@ -1,12 +1,13 @@
+import { Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
 import { delay } from '@masknet/kit'
 import {
     BindingDialog,
     EmojiAvatar,
-    type BindingDialogProps,
-    useVerifyContent,
     useBaseUIRuntime,
+    useVerifyContent,
     useVerifyNextID,
+    type BindingDialogProps,
 } from '@masknet/shared'
 import {
     MaskMessages,
@@ -27,7 +28,6 @@ import { AccountConnectStatus } from './AccountConnectStatus.js'
 import { SetupGuideContext } from './SetupGuideContext.js'
 import { useConnectPersona } from './hooks/useConnectPersona.js'
 import { useNotifyConnected } from './hooks/useNotifyConnected.js'
-import { Trans } from '@lingui/react/macro'
 
 const useStyles = makeStyles()((theme) => ({
     body: {
@@ -157,8 +157,16 @@ export function VerifyNextID({ onClose }: VerifyNextIDProps) {
     const { classes, cx } = useStyles()
     const queryClient = useQueryClient()
 
-    const { userId, myIdentity, personaInfo, checkingVerified, verified, loadingCurrentUserId, currentUserId } =
-        SetupGuideContext.useContainer()
+    const {
+        userId,
+        myIdentity,
+        personaInfo,
+        checkingVerified,
+        verified,
+        loadingCurrentUserId,
+        currentUserId,
+        setIsFirstVerification,
+    } = SetupGuideContext.useContainer()
     const { nickname: username, avatar } = myIdentity
     const personaName = personaInfo?.nickname
     const personaIdentifier = personaInfo?.identifier
@@ -197,6 +205,7 @@ export function VerifyNextID({ onClose }: VerifyNextIDProps) {
 
         const isBound = await NextIDProof.queryIsBound(personaInfo.identifier.publicKeyAsHex, nextIdPlatform, userId)
         if (!isBound) {
+            setIsFirstVerification(true)
             await handleVerifyNextID(personaInfo, userId)
             Telemetry.captureEvent(EventType.Access, EventID.EntryPopupSocialAccountVerifyTwitter)
         }