feat: setup improve for testing

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

@@ -1,12 +1,11 @@
 import { Button, useTheme } from '@mui/material'
-import { useNavigate } from 'react-router-dom'
-import { DashboardRoutes } from '@masknet/shared-base'
 import { ColumnLayout } from '../../components/RegisterFrame/ColumnLayout'
 import { styled } from '@mui/material/styles'
 import { memo, MutableRefObject, useEffect, useMemo, useRef } from 'react'
 import { useDashboardI18N } from '../../locales'
 import links from '../../components/FooterLine/links.json'
 import { openWindow } from '@masknet/shared-base-ui'
+import { Services } from '../../API'
 
 const Content = styled('div')(({ theme }) => ({
     padding: `${theme.spacing(1)} ${theme.spacing(4)}`,
@@ -33,7 +32,6 @@ const IFrame = styled('iframe')(({ theme }) => ({
 export default function Welcome() {
     const iframeRef = useRef<HTMLIFrameElement | null>(null)
     const mode = useTheme().palette.mode
-    const navigate = useNavigate()
 
     const agreementContentPageURL = new URL('./en.html', import.meta.url).toString()
     const privacyPolicyDocument = useMemo(() => () => iframeRef?.current?.contentWindow?.document, [iframeRef])
@@ -79,7 +77,10 @@ export default function Welcome() {
             iframeRef={iframeRef}
             privacyPolicyURL={agreementContentPageURL}
             iframeLoadHandler={handleIFrameLoad}
-            agreeHandler={() => navigate(DashboardRoutes.Setup)}
+            agreeHandler={async () => {
+                const url = await Services.SocialNetwork.setupSocialNetwork('twitter.com', false)
+                if (url) location.assign(url)
+            }}
             cancelHandler={() => window.close()}
         />
     )

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

@@ -111,9 +111,10 @@
     "setup_guide_pin_tip_step_find_left": "Find Mask Network in the list of extensions and click the ",
     "setup_guide_pin_tip_step_find_right": " button.",
     "setup_guide_pin_tip_successfully": "Pinned successfully.",
-    "user_guide_tip_1": "Connect wallet to explore multi-chain dApps.",
-    "user_guide_tip_2": "Setup your exclusive NFT Avatar, explore the endless possibilities of Web 3.0.",
-    "user_guide_tip_3": "Click here to have a quick start.",
+    "user_guide_tip_1": "Explore multi-chain dApps.",
+    "user_guide_tip_2": "Connect and switch your wallet.",
+    "user_guide_tip_3": "Browse the Web 3 footprints of your Twitter friends, enjoy the freedom of Web 3.",
+    "user_guide_tip_4": "Click here to have a quick start.",
     "create_persona": "Create persona",
     "connect_persona": "Connect persona",
     "please_create_persona": "Please create persona",

packages/mask/shared-ui/locales/zh-CN.json

@@ -106,8 +106,9 @@
     "setup_guide_pin_tip_step_find_right": " 按钮。",
     "setup_guide_pin_tip_successfully": "固定成功。",
     "user_guide_tip_1": "点击这里快速访问主要功能。",
-    "user_guide_tip_2": "点击这里连接您的钱包。您可以在此选择网络或更改您的钱包。",
-    "user_guide_tip_3": "点击这里快速开始。",
+    "user_guide_tip_2": "点击这里连接或更改您的钱包。",
+    "user_guide_tip_3": "浏览 Twitter 好友的 Web 3 足迹，畅享 Web 3 的自由。",
+    "user_guide_tip_4": "尝试快速开始探索 Web 3 世界。",
     "create_persona": "创建身份",
     "connect_persona": "连接身份",
     "please_create_persona": "请创建身份",

packages/mask/src/components/GuideStep/index.tsx

@@ -119,6 +119,10 @@ export default function GuideStep({
         if (disabled) return
         const open = +lastStep === step
         setOpen(open)
+
+        if (!open) return
+        if (location.pathname === '/home') return
+        location.assign('/home')
     }, [lastStep])
 
     useEffect(() => {
@@ -169,7 +173,7 @@ export default function GuideStep({
         return () => {
             window.removeEventListener('resize', onResize)
         }
-    }, [childrenRef])
+    }, [childrenRef, lastStep, open])
 
     return (
         <>

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

@@ -73,7 +73,7 @@ const EntryIconButton = memo((props: PostDialogHintUIProps) => {
     return disableGuideTip ? (
         getEntry()
     ) : (
-        <GuideStep step={3} total={3} tip={t('user_guide_tip_3')} onComplete={props.onHintButtonClicked}>
+        <GuideStep step={4} total={4} tip={t('user_guide_tip_4')} onComplete={props.onHintButtonClicked}>
             {getEntry()}
         </GuideStep>
     )

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

@@ -34,6 +34,7 @@ import { AccountBalanceWalletIcon } from '@masknet/icons'
 import { makeStyles } from '@masknet/theme'
 import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord'
 import { NextIDVerificationStatus, useNextIDConnectStatus } from '../DataSource/useNextID'
+import { MaskIcon } from '../../resources/MaskIcon'
 
 const useStyles = makeStyles()((theme) => ({
     title: {
@@ -100,31 +101,27 @@ function ToolboxHintForApplication(props: ToolboxHintProps) {
     const { t } = useI18N()
     const { openDialog } = useRemoteControlledDialog(WalletMessages.events.ApplicationDialogUpdated)
     return (
-        <Container>
-            <ListItemButton onClick={openDialog}>
-                <img
-                    src={new URL('../../plugins/EVM/assets/maskwallet.png', import.meta.url).toString()}
-                    style={{
-                        width: iconSize,
-                        height: iconSize,
-                    }}
-                />
-                {mini ? null : (
-                    <ListItemText
-                        primary={
-                            <Box
-                                sx={{
-                                    display: 'flex',
-                                    justifyContent: 'space-between',
-                                    alignItems: 'center',
-                                }}>
-                                <Typography className={classes.title}>{t('mask_network')}</Typography>
-                            </Box>
-                        }
-                    />
-                )}
-            </ListItemButton>
-        </Container>
+        <GuideStep step={1} total={4} tip={t('user_guide_tip_1')}>
+            <Container>
+                <ListItemButton onClick={openDialog}>
+                    <MaskIcon style={{ width: iconSize, height: iconSize }} />
+                    {mini ? null : (
+                        <ListItemText
+                            primary={
+                                <Box
+                                    sx={{
+                                        display: 'flex',
+                                        justifyContent: 'space-between',
+                                        alignItems: 'center',
+                                    }}>
+                                    <Typography className={classes.title}>{t('mask_network')}</Typography>
+                                </Box>
+                            }
+                        />
+                    )}
+                </ListItemButton>
+            </Container>
+        </GuideStep>
     )
 }
 
@@ -157,8 +154,8 @@ function ToolboxHintForWallet(props: ToolboxHintProps) {
 
     return (
         <>
-            <GuideStep step={1} total={3} tip={t('user_guide_tip_1')}>
-                <Container>
+            <Container>
+                <GuideStep step={2} total={4} tip={t('user_guide_tip_2')}>
                     <ListItemButton onClick={openWallet}>
                         <ListItemIcon>
                             {isWalletValid ? (
@@ -196,8 +193,8 @@ function ToolboxHintForWallet(props: ToolboxHintProps) {
                             />
                         )}
                     </ListItemButton>
-                </Container>
-            </GuideStep>
+                </GuideStep>
+            </Container>
         </>
     )
 }

packages/mask/src/extension/background-script/SocialNetworkService.ts

@@ -1,12 +1,17 @@
-import { definedSocialNetworkUIs, getNetworkWorker, loadSocialNetworkUI, SocialNetworkUI } from '../../social-network'
-import { Flags } from '../../../shared'
-
-import { currentSetupGuideStatus } from '../../settings/settings'
+import { currentSetupGuideStatus, userGuideStatus } from '../../settings/settings'
 import stringify from 'json-stable-stringify'
 import { SetupGuideStep } from '../../components/InjectedComponents/SetupGuide/types'
 import type { PersonaIdentifier, ProfileIdentifier } from '@masknet/shared-base'
 import { delay } from '@dimensiondev/kit'
 import { requestExtensionPermission } from '../../../background/services/helper'
+import {
+    definedSocialNetworkUIs,
+    getNetworkWorker,
+    loadSocialNetworkUI,
+    loadSocialNetworkUIs,
+    SocialNetworkUI,
+} from '../../social-network'
+import { Flags } from '../../../shared'
 
 export async function getDefinedSocialNetworkUIs() {
     return [...definedSocialNetworkUIs.values()].map(({ networkIdentifier }) => {
@@ -22,6 +27,30 @@ function requestSNSAdaptorPermission(ui: SocialNetworkUI.Definition) {
     return requestExtensionPermission({ origins: [...ui.declarativePermissions.origins] })
 }
 
+function requestSNSAdaptorsPermission(uis: SocialNetworkUI.Definition[]) {
+    return requestExtensionPermission({
+        origins: uis.map((x) => x.declarativePermissions.origins).flat(),
+    })
+}
+
+export async function setupSocialNetwork(defaultNetwork: string, newTab = true) {
+    const ui = await loadSocialNetworkUI(defaultNetwork)
+    const home = ui.utils.getHomePage?.()
+
+    const uis = await loadSocialNetworkUIs()
+    if (!Flags.no_web_extension_dynamic_permission_request) {
+        if (!(await requestSNSAdaptorsPermission(uis))) return
+    }
+
+    userGuideStatus[defaultNetwork].value = '1'
+    await delay(100)
+    if (!home) return
+    if (!newTab) return home
+
+    browser.tabs.create({ active: true, url: home })
+    return
+}
+
 export async function connectSocialNetwork(
     identifier: PersonaIdentifier,
     network: string,

packages/mask/src/social-network-adaptor/twitter.com/collecting/identity.ts

@@ -8,21 +8,49 @@ import {
     searchSelfHandleSelector,
     searchSelfNicknameSelector,
     searchSelfAvatarSelector,
+    selfInfoSelectors,
 } from '../utils/selector'
 import { creator, SocialNetworkUI as Next } from '../../../social-network'
 import Services from '../../../extension/service'
 import { twitterBase } from '../base'
 import { getAvatar, getBio, getNickname, getTwitterId, getPersonalHomepage } from '../utils/user'
 import { isMobileTwitter } from '../utils/isMobile'
 
+function recognizeDesktop() {
+    const collect = () => {
+        const handle = selfInfoSelectors().handle.evaluate()
+        const nickname = selfInfoSelectors().name.evaluate()
+        const avatar = selfInfoSelectors().userAvatar.evaluate()
+
+        return { handle, nickname, avatar }
+    }
+
+    const watcher = new MutationObserverWatcher(selfInfoSelectors().handle)
+
+    return { watcher, collect }
+}
+
+function recognizeMobile() {
+    const collect = () => {
+        const avatar = searchSelfAvatarSelector().evaluate()?.getAttribute('src') ?? ''
+        const handle = searchSelfHandleSelector().evaluate()?.textContent?.trim()?.replace(/^@/, '')
+        const nickname = searchSelfNicknameSelector().evaluate()?.textContent?.trim() ?? ''
+
+        return { handle, nickname, avatar }
+    }
+
+    const watcher = new MutationObserverWatcher(searchSelfHandleSelector())
+
+    return { watcher, collect }
+}
+
 function resolveLastRecognizedIdentityInner(
     ref: Next.CollectingCapabilities.IdentityResolveProvider['recognized'],
     cancel: AbortSignal,
 ) {
+    const task = isMobileTwitter ? recognizeMobile() : recognizeDesktop()
     const assign = () => {
-        const avatar = searchSelfAvatarSelector().evaluate()?.getAttribute('src') ?? ''
-        const handle = searchSelfHandleSelector().evaluate()?.textContent?.trim()?.replace(/^@/, '')
-        const nickname = searchSelfNicknameSelector().evaluate()?.textContent?.trim() ?? ''
+        const { handle, nickname, avatar } = task.collect()
 
         if (handle) {
             ref.value = {
@@ -32,7 +60,7 @@ function resolveLastRecognizedIdentityInner(
             }
         }
     }
-    const watcher = new MutationObserverWatcher(searchSelfHandleSelector())
+    const watcher = task.watcher
         .addListener('onAdd', () => assign())
         .addListener('onChange', () => assign())
         .startWatch({

packages/mask/src/social-network-adaptor/twitter.com/injection/ToolboxHint.tsx

@@ -15,5 +15,5 @@ export function injectToolboxHintAtTwitter(signal: AbortSignal, category: 'walle
 function injectProfile(signal: AbortSignal) {
     const watcher = new MutationObserverWatcher(sideBarProfileSelector())
     startWatch(watcher, signal)
-    createReactRootShadowed(watcher.firstDOMProxy.afterShadow, { signal }).render(<ProfileLinkAtTwitter />)
+    createReactRootShadowed(watcher.firstDOMProxy.beforeShadow, { signal }).render(<ProfileLinkAtTwitter />)
 }

packages/mask/src/social-network-adaptor/twitter.com/injection/ToolboxHint_UI.tsx

@@ -52,7 +52,7 @@ export function ToolboxHintAtTwitter(props: { category: 'wallet' | 'application'
 export function ProfileLinkAtTwitter() {
     const { t } = useI18N()
     return (
-        <GuideStep step={2} total={3} tip={t('user_guide_tip_2')}>
+        <GuideStep step={3} total={4} tip={t('user_guide_tip_3')}>
             <Box sx={{ position: 'absolute', left: 0, right: 0, width: '100%', height: '100%' }} />
         </GuideStep>
     )

packages/mask/src/social-network-adaptor/twitter.com/utils/selector.ts

@@ -1,4 +1,5 @@
 import { LiveSelector } from '@dimensiondev/holoflows-kit'
+import { regexMatch } from '../../../utils/utils'
 import { isMobileTwitter } from './isMobile'
 import { isCompose } from './postBox'
 
@@ -113,7 +114,7 @@ export const postEditorInPopupSelector: () => LiveSelector<E, true> = () =>
 export const toolBoxInSideBarSelector: () => LiveSelector<E, true> = () =>
     querySelector<E>('[role="banner"] [role="navigation"] > div')
 export const sideBarProfileSelector: () => LiveSelector<E, true> = () =>
-    querySelector<E>('[role="banner"] [role="navigation"] [aria-label="Lists"] > div')
+    querySelector<E>('[role="banner"] [role="navigation"] [aria-label="Profile"] > div')
 export const postEditorInTimelineSelector: () => LiveSelector<E, true> = () =>
     querySelector<E>('[role="main"] :not(aside) > [role="progressbar"] ~ div [role="button"][aria-label]:nth-child(6)')
 
@@ -216,6 +217,25 @@ export const postsContentSelector = () =>
 export const postAvatarsContentSelector = () =>
     querySelectorAll('[data-testid="tweet"] > div > div > div > :nth-child(2)')
 
+const base = querySelector<HTMLScriptElement>('#react-root + script')
+const handle = /"screen_name":"(.*?)"/
+const name = /"name":"(.*?)"/
+const bio = /"description":"(.*?)"/
+const avatar = /"profile_image_url_https":"(.*?)"/
+/**
+ * first matched element can be extracted by index zero, followings are all capture groups, if no 'g' specified.
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match
+ */
+const p = (regex: RegExp, index: number) => {
+    return base.clone().map((x) => regexMatch(x.innerText, regex, index))
+}
+export const selfInfoSelectors = () => ({
+    handle: p(handle, 1),
+    name: p(name, 1),
+    bio: p(bio, 1),
+    userAvatar: p(avatar, 1),
+})
+
 // #region self info
 export const searchSelfHandleSelector = () => {
     return querySelector<HTMLSpanElement>(

packages/mask/src/social-network/ui.ts

@@ -90,7 +90,6 @@ export async function activateSocialNetworkUIInner(ui_deferred: SocialNetworkUI.
         ui.injection.toolbox?.(signal, 'wallet')
         ui.injection.toolbox?.(signal, 'application')
     }
-    ui.injection.setupPrompt?.(signal)
     ui.injection.newPostComposition?.start?.(signal)
     ui.injection.searchResult?.(signal)
     ui.injection.userBadge?.(signal)
@@ -229,6 +228,19 @@ export async function activateSocialNetworkUIInner(ui_deferred: SocialNetworkUI.
     }
 }
 
+export async function loadSocialNetworkUIs(): Promise<SocialNetworkUI.Definition[]> {
+    const defines = [...definedSocialNetworkUIs.values()].map(async (x) => x.load())
+    const uis = (await Promise.all(defines)).map((x) => x.default)
+
+    if (!defines) throw new Error('SNS adaptor load failed')
+
+    for (const ui of uis) {
+        definedSocialNetworkUIsResolved.set(ui.networkIdentifier, ui)
+    }
+
+    return uis
+}
+
 export async function loadSocialNetworkUI(identifier: string): Promise<SocialNetworkUI.Definition> {
     if (definedSocialNetworkUIsResolved.has(identifier)) return definedSocialNetworkUIsResolved.get(identifier)!
     const define = definedSocialNetworkUIs.get(identifier)