feat: next id web3 tab

packages/mask/src/components/DataSource/useNextID.ts

@@ -1,4 +1,4 @@
-import { useAsync, useAsyncRetry } from 'react-use'
+import { useAsyncRetry } from 'react-use'
 import type { NextIDPlatform } from '@masknet/shared-base'
 import Services from '../../extension/service'
 import { useMemo, useState } from 'react'
@@ -13,15 +13,16 @@ import { useValueRef } from '@masknet/shared'
 import { queryExistedBindingByPersona, queryExistedBindingByPlatform, queryIsBound } from '@masknet/web3-providers'
 
 export const usePersonaBoundPlatform = (personaPublicKey: string) => {
-    useAsyncRetry(() => {
+    return useAsyncRetry(() => {
         return queryExistedBindingByPersona(personaPublicKey)
     }, [personaPublicKey])
 }
 
 let isOpenedVerifyDialog = false
+let isOpenedFromButton = false
 
 export const useNextIDBoundByPlatform = (platform: NextIDPlatform, identity: string) => {
-    useAsyncRetry(() => {
+    return useAsyncRetry(() => {
         return queryExistedBindingByPlatform(platform, identity)
     }, [platform, identity])
 }
@@ -45,15 +46,18 @@ export function useNextIDConnectStatus() {
         lastState.username || (lastRecognized.identifier.isUnknown ? '' : lastRecognized.identifier.userId),
     )
 
-    const { value: isVerified = false } = useAsync(async () => {
+    const { value: isVerified = false, retry } = useAsyncRetry(async () => {
         if (lastState.status === SetupGuideStep.FindUsername) return true
         if (isOpenedVerifyDialog) return true
         if (!enableNextID || !username || !personaConnectStatus.connected) return true
 
         const currentPersona = await Services.Settings.getCurrentPersona()
         if (!currentPersona?.publicHexKey) return true
 
-        if (dismissVerifyNextID[ui.networkIdentifier].value[`${username}_${currentPersona.identifier.toText()}`])
+        if (
+            dismissVerifyNextID[ui.networkIdentifier].value[`${username}_${currentPersona.identifier.toText()}`] &&
+            !isOpenedFromButton
+        )
             return true
 
         const platform = ui.configuration.nextIDConfig?.platform as NextIDPlatform | undefined
@@ -68,8 +72,16 @@ export function useNextIDConnectStatus() {
         })
 
         isOpenedVerifyDialog = true
+        isOpenedFromButton = false
         return false
-    }, [username, enableNextID, lastStateRef.value])
+    }, [username, enableNextID, lastStateRef.value, isOpenedVerifyDialog])
 
-    return isVerified
+    return {
+        isVerified,
+        reset: () => {
+            isOpenedVerifyDialog = false
+            isOpenedFromButton = true
+            retry()
+        },
+    }
 }

packages/mask/src/components/DataSource/usePersonaConnectStatus.ts

@@ -1,6 +1,7 @@
 import { DashboardRoutes, ProfileIdentifier } from '@masknet/shared-base'
 import stringify from 'json-stable-stringify'
 import { useMemo } from 'react'
+import type { Persona } from '../../database'
 import Services from '../../extension/service'
 import { currentSetupGuideStatus } from '../../settings/settings'
 import { activatedSocialNetworkUI } from '../../social-network'
@@ -27,13 +28,13 @@ export function usePersonaConnectStatus() {
     return useMemo(() => {
         const id = new ProfileIdentifier(activatedSocialNetworkUI.networkIdentifier, lastRecognized.identifier.userId)
         let connected = false
+        let currentConnectedPersona: Persona | undefined
         personas.forEach((p) => {
-            p.identifier
-            if (p.linkedProfiles.get(id)) {
-                connected = true
-            }
+            if (!p.linkedProfiles.get(id)) return
+            connected = true
+            currentConnectedPersona = p
         })
         const action = !personas.length ? createPersona : !connected ? connectPersona : null
-        return { connected, action, hasPersona: !!personas.length }
+        return { connected, action, hasPersona: !!personas.length, currentConnectedPersona }
     }, [personas, lastRecognized, activatedSocialNetworkUI])
 }

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

@@ -1,14 +1,18 @@
 import { useEffect, useMemo, useState } from 'react'
 import { useUpdateEffect } from 'react-use'
 import { first } from 'lodash-unified'
+import type { NextIDPlatform } from '@masknet/shared-base'
 import { Box, CircularProgress } from '@mui/material'
 import { makeStyles, useStylesExtends } from '@masknet/theme'
 import { useAddressNames } from '@masknet/web3-shared-evm'
 import { createInjectHooksRenderer, useActivatedPluginsSNSAdaptor, Plugin, PluginId } from '@masknet/plugin-infra'
 import { PageTab } from '../InjectedComponents/PageTab'
 import { useLocationChange } from '../../utils/hooks/useLocationChange'
 import { MaskMessages, useI18N } from '../../utils'
-import { useCurrentVisitingIdentity } from '../DataSource/useActivatedUI'
+import { useCurrentVisitingIdentity, useLastRecognizedIdentity } from '../DataSource/useActivatedUI'
+import { useNextIDBoundByPlatform } from '../DataSource/useNextID'
+import { usePersonaConnectStatus } from '../DataSource/usePersonaConnectStatus'
+import { activatedSocialNetworkUI } from '../../social-network'
 
 function getTabContent(tabId: string) {
     return createInjectHooksRenderer(useActivatedPluginsSNSAdaptor.visibility.useAnyMode, (x) => {
@@ -39,8 +43,18 @@ export function ProfileTabContent(props: ProfileTabContentProps) {
     const [hidden, setHidden] = useState(true)
     const [selectedTab, setSelectedTab] = useState<Plugin.SNSAdaptor.ProfileTab | undefined>()
 
+    const currentIdentity = useLastRecognizedIdentity()
     const identity = useCurrentVisitingIdentity()
+    const { currentConnectedPersona } = usePersonaConnectStatus()
+    const platform = activatedSocialNetworkUI.configuration.nextIDConfig?.platform as NextIDPlatform
     const { value: addressNames = [], loading: loadingAddressNames } = useAddressNames(identity)
+    const { value: personaList = [], loading: loadingPersonaList } = useNextIDBoundByPlatform(
+        platform as NextIDPlatform,
+        identity.identifier.userId,
+    )
+    const currentAccountNotConnectPersona =
+        currentIdentity.identifier.userId === identity.identifier.userId &&
+        personaList.findIndex((persona) => persona?.persona === currentConnectedPersona?.publicHexKey) === -1
 
     const tabs = useActivatedPluginsSNSAdaptor('any')
         .flatMap((x) => x.ProfileTabs?.map((y) => ({ ...y, pluginID: x.ID })) ?? [])
@@ -81,12 +95,15 @@ export function ProfileTabContent(props: ProfileTabContentProps) {
     }, [identity])
 
     const ContentComponent = useMemo(() => {
-        return getTabContent(selectedTabComputed?.ID ?? '')
+        const tab = currentAccountNotConnectPersona
+            ? tabs?.find((tab) => tab?.pluginID === PluginId.NextID)?.ID
+            : selectedTabComputed?.ID
+        return getTabContent(tab ?? '')
     }, [selectedTabComputed, identity.identifier])
 
     if (hidden) return null
 
-    if (loadingAddressNames)
+    if (loadingAddressNames || loadingPersonaList)
         return (
             <div className={classes.root}>
                 <Box
@@ -105,7 +122,11 @@ export function ProfileTabContent(props: ProfileTabContentProps) {
                 <PageTab tabs={tabs} selectedTab={selectedTabComputed} onChange={setSelectedTab} />
             </div>
             <div className={classes.content}>
-                <ContentComponent addressNames={addressNames} identity={identity} />
+                <ContentComponent
+                    addressNames={addressNames}
+                    identity={identity}
+                    personaList={personaList?.map((persona) => persona.persona)}
+                />
             </div>
         </div>
     )

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

@@ -84,7 +84,7 @@ export interface ToolboxHintProps {
 }
 export function ToolboxHintUnstyled(props: ToolboxHintProps) {
     const { t } = useI18N()
-    const isNextIDVerified = useNextIDConnectStatus()
+    const { isVerified: isNextIDVerified } = useNextIDConnectStatus()
     const {
         ListItemButton = MuiListItemButton,
         ListItemText = MuiListItemText,

packages/mask/src/plugins/NextID/SNSAdaptor/index.tsx

@@ -5,6 +5,7 @@ import { NextIdPage } from '../components/NextIdPage'
 import { RootContext } from '../contexts'
 import { TipButton, TipTaskManager } from '../components/tip'
 import { Flags } from '../../../../shared'
+import { EMPTY_LIST } from '@masknet/web3-shared-evm'
 
 const sns: Plugin.SNSAdaptor.Definition = {
     ...base,
@@ -15,7 +16,7 @@ const sns: Plugin.SNSAdaptor.Definition = {
             label: 'Wallet',
             priority: 10,
             UI: {
-                TabContent: NextIdPage,
+                TabContent: ({ personaList = EMPTY_LIST }) => <NextIdPage personaList={personaList} />,
             },
         },
     ],

packages/mask/src/plugins/NextID/components/BindDialog.tsx

@@ -4,7 +4,7 @@ import { useAsyncRetry } from 'react-use'
 import Services from '../../../extension/service'
 import { isSameAddress } from '@masknet/web3-shared-evm'
 import type { Persona } from '../../../database'
-import type { Binding } from '../types'
+import type { Binding } from '@masknet/shared-base'
 import { BindPanelUI } from './BindPanelUI'
 import { useAccount } from '@masknet/plugin-infra'
 import { useCustomSnackbar } from '@masknet/theme'

packages/mask/src/plugins/NextID/components/BindingItem.tsx

@@ -1,7 +1,7 @@
 import { ChainId, formatEthereumAddress } from '@masknet/web3-shared-evm'
 import { Box, Link, Stack, Typography } from '@mui/material'
 import { memo } from 'react'
-import { Platform } from '../types'
+import { NextIDPlatform } from '@masknet/shared-base'
 import { DeleteIcon } from '@masknet/icons'
 import { makeStyles } from '@masknet/theme'
 import { CopyIconButton } from './CopyIconButton'
@@ -42,7 +42,7 @@ const useStyles = makeStyles()((theme) => ({
     },
 }))
 interface Item {
-    platform: Platform
+    platform: NextIDPlatform
     identity: string
     enableAction: boolean
     onUnBind(address: string): void
@@ -54,7 +54,7 @@ export const BindingItem = memo<Item>(({ platform, identity, enableAction, onUnB
     const { classes } = useStyles()
     const networkDescriptor = useNetworkDescriptor(ChainId.Mainnet, NetworkPluginID.PLUGIN_EVM)
 
-    if (platform === Platform.ethereum) {
+    if (platform === NextIDPlatform.Ethereum) {
         return (
             <Stack
                 direction="row"