feat: support next id on popup

packages/mask/background/services/helper/index.ts

@@ -3,4 +3,4 @@ export { resolveTCOLink } from './short-link-resolver'
 export { openPopupWindow, removePopupWindow } from './popup-opener'
 export { __deprecated__getStorage, __deprecated__setStorage } from './deprecated-storage'
 export { queryExtensionPermission, requestExtensionPermission } from './request-permission'
-export { createPersonaPayload, queryExistedBinding, bindProof } from './nextID'
+export { createPersonaPayload, queryExistedBinding, bindProof, queryPersonaHexPublicKey } from './nextID'

packages/mask/background/services/helper/nextID.ts

@@ -72,7 +72,7 @@ export async function bindProof(
     })
 }
 
-async function queryPersonaHexPublicKey(persona: PersonaIdentifier) {
+export async function queryPersonaHexPublicKey(persona: PersonaIdentifier) {
     const key256 = decompressSecp256k1Key(persona.compressedPoint.replace(/\|/g, '/'))
     if (!key256.x || !key256.y) return null
     const arr = compressSecp256k1Point(key256.x, key256.y)

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

@@ -994,7 +994,12 @@
     "popups_wallet_no_transactions": "You have no transactions",
     "popups_missing_parameter_caption": "Please close this page.",
     "popups_persona_connect_to": "Connect to {{type}}",
+    "popups_persona_to_be_verified": "To be verified",
     "popups_persona_disconnect": "Disconnect",
+    "popups_persona_disconnect_confirmation": "Disconnect confirmation?",
+    "popups_persona_disconnect_confirmation_description": "This persona verification record will no longer show up in your verification profile page. Your\n Mask friends can no longer send encrypted message to you by this persona or check your Web 3\n products",
+    "popups_persona": "Persona",
+    "popups_twitter_id": "Twitter ID",
     "popups_persona_logout": "Log out",
     "popups_persona_disconnect_tip": "After logging out, your associated social accounts can no longer decrypt past encrypted messages. If you need to reuse your account, you can recover your account with your identity, private key, local or cloud backup.",
     "popups_persona_persona_name_exists": "The persona name already exists",

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

@@ -140,15 +140,10 @@ function SetupGuideUI(props: SetupGuideUIProps) {
                     const post = collectVerificationPost?.(postContent)
                     if (post && persona_.publicHexKey) {
                         clearInterval(verifyPostCollectTimer.current!)
-                        await bindProof(
-                            persona_.publicHexKey,
-                            NextIDAction.Create,
-                            platform,
-                            username,
-                            undefined,
+                        await bindProof(persona_.publicHexKey, NextIDAction.Create, platform, username, {
                             signature,
-                            post.postId,
-                        )
+                            proofLocation: post.postId,
+                        })
                         resolve()
                     }
                 }, 1000)

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

@@ -183,6 +183,7 @@ export async function queryOwnedPersonaInformation(): Promise<PersonaInformation
             nickname: persona.nickname,
             identifier: persona.identifier,
             linkedProfiles: map,
+            publicHexKey: persona.publicHexKey,
         })
         for (const [profile] of persona.linkedProfiles) {
             const linkedProfile = await queryProfile(profile)

packages/mask/src/extension/popups/pages/Personas/Home/index.tsx

@@ -97,7 +97,6 @@ const PersonaHome = memo(() => {
     const { currentPersona, setDeletingPersona, personas } = PersonaContext.useContainer()
     const history = useHistory()
 
-    console.log(personas)
     return (
         <>
             <div className={classes.content}>

packages/mask/src/extension/popups/pages/Personas/PersonaSignRequest/index.tsx

@@ -135,7 +135,10 @@ const PersonaSignRequest = memo(() => {
             </Typography>
             <Typography className={classes.message}>{message}</Typography>
             <div className={classes.controller}>
-                <Button className={classes.button} onClick={onCancel}>
+                <Button
+                    className={classes.button}
+                    style={{ backgroundColor: '#F7F9FA', color: '#1C68F3' }}
+                    onClick={onCancel}>
                     {t('cancel')}
                 </Button>
                 <Button className={classes.button} onClick={onSign} variant="contained">

packages/mask/src/extension/popups/pages/Personas/components/DisconnectDialog/index.tsx

@@ -0,0 +1,93 @@
+import { memo } from 'react'
+import { Button, Dialog, DialogActions, DialogContent, Typography, DialogProps } from '@mui/material'
+import { makeStyles } from '@masknet/theme'
+import classNames from 'classnames'
+import type { ProfileIdentifier } from '@masknet/shared-base'
+import { formatFingerprint } from '@masknet/shared'
+import { PersonaContext } from '../../hooks/usePersonaContext'
+import { LoadingButton } from '@mui/lab'
+import { useI18N } from '../../../../../../utils'
+
+const useStyles = makeStyles()(() => ({
+    title: {
+        fontSize: 16,
+        lineHeight: '22px',
+        color: '#0F1419',
+    },
+    content: {
+        marginTop: 24,
+        fontSize: 14,
+        lineHeight: '20px',
+        color: '#536471',
+    },
+    actions: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16,
+        '& > *': {
+            marginLeft: '0px !important',
+        },
+    },
+    button: {
+        padding: '8px 0',
+        width: '100%',
+        borderRadius: 9999,
+        fontSize: 14,
+        fontWeight: 600,
+        lineHeight: '20px',
+    },
+    confirmButton: {
+        backgroundColor: '#F4212E',
+        color: '#ffffff',
+        '&:hover': {
+            backgroundColor: '#dc1e2a',
+        },
+    },
+    cancelButton: {
+        color: '#111418',
+        border: '1px solid #CFD9DE',
+    },
+}))
+
+interface DisconnectDialogProps extends DialogProps {
+    unbundledIdentity?: ProfileIdentifier
+    onConfirmDisconnect: () => void
+    confirmLoading: boolean
+    onClose: () => void
+}
+
+export const DisconnectDialog = memo<DisconnectDialogProps>(
+    ({ open, onClose, unbundledIdentity, onConfirmDisconnect, confirmLoading }) => {
+        const { classes } = useStyles()
+        const { t } = useI18N()
+        const { currentPersona } = PersonaContext.useContainer()
+        if (!unbundledIdentity) return null
+
+        return (
+            <Dialog open={open}>
+                <DialogContent>
+                    <Typography className={classes.title}>{t('popups_persona_disconnect_confirmation')}</Typography>
+                    <Typography className={classes.content}>
+                        {t('popups_persona_disconnect_confirmation_description')}
+                    </Typography>
+                    <Typography className={classes.content}>
+                        {t('popups_persona')}: {formatFingerprint(currentPersona?.identifier.compressedPoint ?? '', 10)}
+                        <br />
+                        {t('popups_twitter_id')}: @{unbundledIdentity.userId}
+                    </Typography>
+                </DialogContent>
+                <DialogActions className={classes.actions}>
+                    <LoadingButton
+                        loading={confirmLoading}
+                        className={classNames(classes.button, classes.confirmButton)}
+                        onClick={onConfirmDisconnect}>
+                        {t('confirm')}
+                    </LoadingButton>
+                    <Button className={classNames(classes.button, classes.cancelButton)} onClick={onClose}>
+                        {t('cancel')}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        )
+    },
+)