diff --git a/packages/mask/shared-ui/locales/en-US.json b/packages/mask/shared-ui/locales/en-US.json
index 95da20f3f66f..332b46fba6a4 100644
--- a/packages/mask/shared-ui/locales/en-US.json
+++ b/packages/mask/shared-ui/locales/en-US.json
@@ -98,7 +98,6 @@
"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.",
- "setup_guide_pin_dismiss": "Don't show again.",
"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.",
diff --git a/packages/mask/shared-ui/locales/qya-AA.json b/packages/mask/shared-ui/locales/qya-AA.json
index 56401fa05e0e..664b450043f9 100644
--- a/packages/mask/shared-ui/locales/qya-AA.json
+++ b/packages/mask/shared-ui/locales/qya-AA.json
@@ -98,7 +98,6 @@
"setup_guide_pin_tip_step_find_left": "crwdns14606:0crwdne14606:0",
"setup_guide_pin_tip_step_find_right": "crwdns14608:0crwdne14608:0",
"setup_guide_pin_tip_successfully": "crwdns14610:0crwdne14610:0",
- "setup_guide_pin_dismiss": "crwdns13017:0crwdne13017:0",
"user_guide_tip_1": "crwdns9059:0crwdne9059:0",
"user_guide_tip_2": "crwdns9061:0crwdne9061:0",
"user_guide_tip_3": "crwdns13019:0crwdne13019:0",
diff --git a/packages/mask/shared-ui/locales/zh-CN.json b/packages/mask/shared-ui/locales/zh-CN.json
index 3c343f7022a8..dbec7a108da3 100644
--- a/packages/mask/shared-ui/locales/zh-CN.json
+++ b/packages/mask/shared-ui/locales/zh-CN.json
@@ -90,7 +90,6 @@
"user_guide_tip_connected": "您已成功连接到此帐户。",
"setup_guide_say_hello_content": "你好,Mask世界。这是我发的第一条加密信息。安装 https://mask.io来给我发送加密贴文吧。 ",
"setup_guide_say_hello_follow": "关注 {{account}} 来探索Web 3.0。",
- "setup_guide_pin_dismiss": "不再显示",
"user_guide_tip_1": "点击这里快速访问主要功能。",
"user_guide_tip_2": "点击这里连接您的钱包。您可以在此选择网络或更改您的钱包。",
"user_guide_tip_3": "点击这里快速开始。",
diff --git a/packages/mask/src/components/DataSource/useNextID.ts b/packages/mask/src/components/DataSource/useNextID.ts
index 4f764c6aa74a..652f2f079830 100644
--- a/packages/mask/src/components/DataSource/useNextID.ts
+++ b/packages/mask/src/components/DataSource/useNextID.ts
@@ -1,16 +1,16 @@
import { useAsyncRetry } from 'react-use'
-import type { NextIDPlatform } from '@masknet/shared-base'
-import Services from '../../extension/service'
+import type { NextIDPlatform, PersonaIdentifier } from '@masknet/shared-base'
import { useMemo, useState } from 'react'
import { activatedSocialNetworkUI } from '../../social-network'
import { usePersonaConnectStatus } from './usePersonaConnectStatus'
-import { currentSetupGuideStatus, dismissVerifyNextID } from '../../settings/settings'
+import { currentPersonaIdentifier, currentSetupGuideStatus, dismissVerifyNextID } from '../../settings/settings'
import stringify from 'json-stable-stringify'
import { SetupGuideStep } from '../InjectedComponents/SetupGuide/types'
import type { SetupGuideCrossContextStatus } from '../../settings/types'
import { useLastRecognizedIdentity } from './useActivatedUI'
import { useValueRef } from '@masknet/shared'
import { queryExistedBindingByPersona, queryExistedBindingByPlatform, queryIsBound } from '@masknet/web3-providers'
+import Services from '../../extension/service'
export const usePersonaBoundPlatform = (personaPublicKey: string) => {
return useAsyncRetry(() => {
@@ -21,12 +21,28 @@ export const usePersonaBoundPlatform = (personaPublicKey: string) => {
let isOpenedVerifyDialog = false
let isOpenedFromButton = false
+const verifyPersona = (personaIdentifier?: PersonaIdentifier) => async () => {
+ if (!personaIdentifier) return
+ currentSetupGuideStatus[activatedSocialNetworkUI.networkIdentifier].value = stringify({
+ status: SetupGuideStep.VerifyOnNextID,
+ persona: personaIdentifier.toText(),
+ })
+}
+
export const useNextIDBoundByPlatform = (platform: NextIDPlatform, identity: string) => {
return useAsyncRetry(() => {
return queryExistedBindingByPlatform(platform, identity)
}, [platform, identity])
}
+export enum NextIDVerificationStatus {
+ WaitingLocalConnect = 'need-local-connect',
+ WaitingVerify = 'waiting-verify',
+ Verified = 'Verified',
+ HideVerifyDialog = 'hide-verify-dialog',
+ Other = 'Other',
+}
+
export function useNextIDConnectStatus() {
const ui = activatedSocialNetworkUI
const [enableNextID] = useState(ui.configuration.nextIDConfig?.enable)
@@ -46,42 +62,57 @@ export function useNextIDConnectStatus() {
lastState.username || (lastRecognized.identifier.isUnknown ? '' : lastRecognized.identifier.userId),
)
- 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 { value: VerificationStatus = NextIDVerificationStatus.Other, retry } = useAsyncRetry(async () => {
+ // Whether in connect to {platform} process
+ if (lastState.status === SetupGuideStep.FindUsername) return NextIDVerificationStatus.WaitingLocalConnect
- const currentPersona = await Services.Settings.getCurrentPersona()
- if (!currentPersona?.publicHexKey) return true
+ // Whether it has been opened in a lifecycle
+ if (isOpenedVerifyDialog) return NextIDVerificationStatus.HideVerifyDialog
+ // Whether current platform support next id
+ if (!enableNextID || !username || !personaConnectStatus.connected)
+ return NextIDVerificationStatus.WaitingLocalConnect
+
+ const { currentConnectedPersona } = personaConnectStatus
+
+ const currentPersonaIdentity = await Services.Settings.getCurrentPersonaIdentifier()
+ if (currentPersonaIdentity !== currentConnectedPersona?.identifier)
+ return NextIDVerificationStatus.WaitingLocalConnect
+
+ if (!currentConnectedPersona?.publicHexKey) return NextIDVerificationStatus.WaitingLocalConnect
+
+ // Whether used 'Don't show me again
if (
- dismissVerifyNextID[ui.networkIdentifier].value[`${username}_${currentPersona.identifier.toText()}`] &&
+ dismissVerifyNextID[ui.networkIdentifier].value[
+ `${username}_${currentConnectedPersona.identifier.toText()}`
+ ] &&
!isOpenedFromButton
)
- return true
+ return NextIDVerificationStatus.HideVerifyDialog
+ // Whether verified in next id server
const platform = ui.configuration.nextIDConfig?.platform as NextIDPlatform | undefined
- if (!platform) return true
-
- const isBound = await queryIsBound(currentPersona.publicHexKey, platform, username)
- if (isBound) return true
+ if (!platform) return NextIDVerificationStatus.Other
- currentSetupGuideStatus[ui.networkIdentifier].value = stringify({
- status: SetupGuideStep.VerifyOnNextID,
- persona: currentPersona?.identifier.toText(),
- })
+ const isBound = await queryIsBound(currentConnectedPersona.publicHexKey, platform, username)
+ if (isBound) return NextIDVerificationStatus.Verified
isOpenedVerifyDialog = true
isOpenedFromButton = false
- return false
- }, [username, enableNextID, lastStateRef.value, isOpenedVerifyDialog])
+ return NextIDVerificationStatus.WaitingVerify
+ }, [username, enableNextID, lastStateRef.value, isOpenedVerifyDialog, currentPersonaIdentifier.value])
return {
- isVerified,
+ isVerified: VerificationStatus === NextIDVerificationStatus.Verified,
+ status: VerificationStatus,
reset: () => {
isOpenedVerifyDialog = false
isOpenedFromButton = true
retry()
},
+ action:
+ VerificationStatus === NextIDVerificationStatus.WaitingVerify
+ ? verifyPersona(personaConnectStatus.currentConnectedPersona?.identifier)
+ : null,
}
}
diff --git a/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx b/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx
index 0cad752b07ab..495f6b010042 100644
--- a/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx
+++ b/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx
@@ -3,14 +3,11 @@ import { IconButton, Tooltip } from '@mui/material'
import { useStylesExtends, makeStyles } from '@masknet/theme'
import { useI18N } from '../../utils'
import type { BannerProps } from '../Welcomes/Banner'
-import { useValueRef } from '@masknet/shared'
import { isMobileFacebook } from '../../social-network-adaptor/facebook.com/utils/isMobile'
import { MaskSharpIcon } from '../../resources/MaskIcon'
-import { useMyIdentities } from '../DataSource/useActivatedUI'
-import { currentSetupGuideStatus } from '../../settings/settings'
-import { activatedSocialNetworkUI } from '../../social-network'
import classNames from 'classnames'
import GuideStep from '../GuideStep'
+import { usePersonaConnectStatus } from '../DataSource/usePersonaConnectStatus'
interface TooltipConfigProps {
placement?: 'bottom' | 'top'
@@ -18,6 +15,7 @@ interface TooltipConfigProps {
}
export interface PostDialogHintUIProps extends withClasses<'buttonTransform' | 'iconButton' | 'tooltip'> {
+ disableGuideTip?: boolean
size?: number
tooltip?: TooltipConfigProps
onHintButtonClicked: () => void
@@ -44,26 +42,32 @@ const useStyles = makeStyles()((theme) => ({
const EntryIconButton = memo((props: PostDialogHintUIProps) => {
const { t } = useI18N()
- const { size, tooltip } = props
+ const { size, tooltip, disableGuideTip } = props
const classes = useStylesExtends(useStyles(), props)
- return (
+ const getEntry = () => (
+
+
+
+
+
+ )
+
+ return disableGuideTip ? (
+ getEntry()
+ ) : (
-
-
-
-
-
+ {getEntry()}
)
})
@@ -88,11 +92,10 @@ export const PostDialogHintUI = memo(function PostDialogHintUI(props: PostDialog
export interface PostDialogHintProps extends Partial {
NotSetupYetPromptProps?: Partial
size?: number
+ disableGuideTip?: boolean
}
export function PostDialogHint(props: PostDialogHintProps) {
- const identities = useMyIdentities()
- const connecting = useValueRef(currentSetupGuideStatus[activatedSocialNetworkUI.networkIdentifier])
-
- if (connecting || identities.length === 0) return null
+ const personaConnectStatus = usePersonaConnectStatus()
+ if (personaConnectStatus.action) return null
return {}} {...props} />
}
diff --git a/packages/mask/src/components/InjectedComponents/SetupGuide.tsx b/packages/mask/src/components/InjectedComponents/SetupGuide.tsx
index 82ec465f3bb5..441fd52026fc 100644
--- a/packages/mask/src/components/InjectedComponents/SetupGuide.tsx
+++ b/packages/mask/src/components/InjectedComponents/SetupGuide.tsx
@@ -3,7 +3,7 @@ import { makeStyles } from '@masknet/theme'
import { useValueRef } from '@masknet/shared'
import { useI18N, MaskMessages } from '../../utils'
import { activatedSocialNetworkUI, SocialNetworkUI } from '../../social-network'
-import { currentSetupGuideStatus, dismissPinExtensionTip, userGuideStatus } from '../../settings/settings'
+import { currentSetupGuideStatus, userGuideStatus, userPinExtension } from '../../settings/settings'
import type { SetupGuideCrossContextStatus } from '../../settings/types'
import { makeTypedMessageText } from '@masknet/typed-message'
import {
@@ -154,6 +154,8 @@ function SetupGuideUI(props: SetupGuideUIProps) {
})
await waitingPost
+ const isBound = await queryIsBound(persona_.publicHexKey, platform, username)
+ if (!isBound) throw new Error('Failed to verify.')
MaskMessages.events.ownProofChanged.sendToAll(undefined)
}
}
@@ -163,9 +165,8 @@ function SetupGuideUI(props: SetupGuideUIProps) {
setStep(SetupGuideStep.Close)
}
- const onDone = async () => {
- // check verify nextID id state
- if (step === SetupGuideStep.FindUsername && enableNextID && persona_?.publicHexKey) {
+ const onConnected = async () => {
+ if (enableNextID && persona_?.publicHexKey && platform && username) {
const isBound = await queryIsBound(persona_.publicHexKey, platform, username)
if (!isBound) {
currentSetupGuideStatus[ui.networkIdentifier].value = stringify({
@@ -176,22 +177,26 @@ function SetupGuideUI(props: SetupGuideUIProps) {
}
}
- // check pin tip status
- if (step === SetupGuideStep.FindUsername && !dismissPinExtensionTip.value) {
- currentSetupGuideStatus[ui.networkIdentifier].value = stringify({ status: SetupGuideStep.PinExtension })
+ if (!userPinExtension.value) {
+ userPinExtension.value = true
setStep(SetupGuideStep.PinExtension)
return
}
- // check verify on next id status
- if (step === SetupGuideStep.VerifyOnNextID && enableNextID && persona_ && persona_.publicHexKey) {
- const isBound = await queryIsBound(persona_.publicHexKey, platform, username)
- if (!isBound) return
+ onDone()
+ }
+
+ const onVerifyDone = async () => {
+ if (!userPinExtension.value) {
+ userPinExtension.value = true
setStep(SetupGuideStep.PinExtension)
return
}
- // check user guide status
+ onDone()
+ }
+
+ const onDone = async () => {
const network = ui.networkIdentifier
if (network === 'twitter.com' && userGuideStatus[network].value !== 'completed') {
userGuideStatus[network].value = '1'
@@ -222,7 +227,7 @@ function SetupGuideUI(props: SetupGuideUIProps) {
avatar={lastRecognized.avatar}
onUsernameChange={setUsername}
onConnect={onConnect}
- onDone={onDone}
+ onDone={onConnected}
onClose={onClose}
enableNextID={enableNextID}
/>
@@ -237,7 +242,7 @@ function SetupGuideUI(props: SetupGuideUIProps) {
avatar={lastRecognized.avatar}
onUsernameChange={setUsername}
onVerify={onVerify}
- onDone={onDone}
+ onDone={onVerifyDone}
onClose={onClose}
/>
)
diff --git a/packages/mask/src/components/InjectedComponents/SetupGuide/PinExtension.tsx b/packages/mask/src/components/InjectedComponents/SetupGuide/PinExtension.tsx
index 79d9bcbe00ab..414acd773a1a 100644
--- a/packages/mask/src/components/InjectedComponents/SetupGuide/PinExtension.tsx
+++ b/packages/mask/src/components/InjectedComponents/SetupGuide/PinExtension.tsx
@@ -1,12 +1,10 @@
import { useWizardDialogStyles, WizardDialog } from './WizardDialog'
import { useI18N } from '../../../utils'
-import { useState } from 'react'
import { SetupGuideStep } from './types'
-import { Box, Button, Checkbox, FormControlLabel, Typography } from '@mui/material'
+import { Box, Button, Typography } from '@mui/material'
import { MaskIcon } from '../../../resources/MaskIcon'
import ExtensionIcon from '@mui/icons-material/Extension'
import { PinIcon } from '@masknet/icons'
-import { dismissPinExtensionTip } from '../../../settings/settings'
interface PinExtensionProps {
onDone?: () => void
@@ -16,7 +14,6 @@ export function PinExtension({ onDone }: PinExtensionProps) {
const pinImg = new URL('../../../resources/extensionPinned.png', import.meta.url).toString()
const { classes } = useWizardDialogStyles()
const { t } = useI18N()
- const [checked, setChecked] = useState(true)
return (
}
- dismiss={
- {
- setChecked(e.target.checked)
- dismissPinExtensionTip.value = e.target.checked
- }}
- />
- }
- label={t('setup_guide_pin_dismiss')}
- />
- }
onClose={onDone}
/>
)
diff --git a/packages/mask/src/components/InjectedComponents/SetupGuide/VerifyNextID.tsx b/packages/mask/src/components/InjectedComponents/SetupGuide/VerifyNextID.tsx
index 5c7c8811db5e..4e14d30fc99e 100644
--- a/packages/mask/src/components/InjectedComponents/SetupGuide/VerifyNextID.tsx
+++ b/packages/mask/src/components/InjectedComponents/SetupGuide/VerifyNextID.tsx
@@ -88,10 +88,10 @@ export const VerifyNextID = ({
variant="contained"
init={t('setup_guide_verify')}
waiting={t('setup_guide_verifying')}
- complete={t('setup_guide_verify')}
+ complete={t('ok')}
failed={t('setup_guide_verifying_failed')}
executor={onVerify}
- onComplete={onDone}
+ completeOnClick={onDone}
disabled={!username || !personaName}
completeIcon={null}
failIcon={null}
diff --git a/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx b/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx
index 915d3dd38c8d..37ef203ab113 100644
--- a/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx
+++ b/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx
@@ -22,7 +22,7 @@ import {
useWeb3State,
useReverseAddress,
} from '@masknet/plugin-infra'
-import { useCallback, useMemo } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
import { useRemoteControlledDialog, WalletIcon } from '@masknet/shared'
import { WalletMessages } from '../../plugins/Wallet/messages'
import { useI18N } from '../../utils'
@@ -33,7 +33,7 @@ import { MaskFilledIcon } from '../../resources/MaskIcon'
import { makeStyles } from '@masknet/theme'
import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord'
import { usePersonaConnectStatus } from '../DataSource/usePersonaConnectStatus'
-import { useNextIDConnectStatus } from '../DataSource/useNextID'
+import { NextIDVerificationStatus, useNextIDConnectStatus } from '../DataSource/useNextID'
const useStyles = makeStyles()((theme) => ({
title: {
@@ -84,7 +84,7 @@ export interface ToolboxHintProps {
}
export function ToolboxHintUnstyled(props: ToolboxHintProps) {
const { t } = useI18N()
- const { isVerified: isNextIDVerified } = useNextIDConnectStatus()
+ const nextIDConnectStatus = useNextIDConnectStatus()
const {
ListItemButton = MuiListItemButton,
ListItemText = MuiListItemText,
@@ -110,8 +110,16 @@ export function ToolboxHintUnstyled(props: ToolboxHintProps) {
: walletTitle
}, [personaConnectStatus, walletTitle, t])
+ useEffect(() => {
+ if (personaConnectStatus.action) return
+ const { status, isVerified, action } = nextIDConnectStatus
+ if (isVerified || status === NextIDVerificationStatus.WaitingLocalConnect) return
+ if (action) {
+ action()
+ }
+ }, [nextIDConnectStatus.status])
+
const onClick = () => {
- if (!isNextIDVerified) return
personaConnectStatus.action ? personaConnectStatus.action() : openWallet()
}
diff --git a/packages/mask/src/settings/settings.ts b/packages/mask/src/settings/settings.ts
index 54d11bfdf45a..8f21f995b71d 100644
--- a/packages/mask/src/settings/settings.ts
+++ b/packages/mask/src/settings/settings.ts
@@ -62,6 +62,9 @@ export const sayHelloShowed: NetworkSettings = createNetworkSettings('s
export const dismissPinExtensionTip = createGlobalSettings('dismissPinExtensionTip', false, {
primary: () => '',
})
+export const userPinExtension = createGlobalSettings('userPinExtension', false, {
+ primary: () => '',
+})
export const dismissVerifyNextID: NetworkSettings<{ [key in string]: boolean }> = createNetworkSettings(
'dismissVerifyNextID',
{},
diff --git a/packages/mask/src/social-network-adaptor/twitter.com/injection/PostDialogHint.tsx b/packages/mask/src/social-network-adaptor/twitter.com/injection/PostDialogHint.tsx
index c4b5efbb4f9a..7169d274e4ae 100644
--- a/packages/mask/src/social-network-adaptor/twitter.com/injection/PostDialogHint.tsx
+++ b/packages/mask/src/social-network-adaptor/twitter.com/injection/PostDialogHint.tsx
@@ -61,6 +61,7 @@ function PostDialogHintAtTwitter({ reason }: { reason: 'timeline' | 'popup' }) {
}, [reason])
return (