feat: mf-5479 next id verification post

Author: UncleBill

packages/mask/content-script/site-adaptors/twitter.com/injection/Tips/PostTipsButton.tsx

@@ -52,7 +52,6 @@ export function injectTipsButtonOnPost(signal: AbortSignal) {
                 const root = attachReactTreeWithContainer(proxy.afterShadow, {
                     signal,
                     tag: createRootElement,
-                    // untilVisible: true,
                 })
                 root.render(<PostTipsSlot userId={userId} />)
                 remover = root.destroy

packages/plugins/NextID/package.json

@@ -24,6 +24,7 @@
     "@masknet/web3-providers": "workspace:^",
     "@masknet/web3-shared-base": "workspace:^",
     "@masknet/web3-shared-evm": "workspace:^",
-    "react-use": "^17.4.0"
+    "react-use": "^17.4.0",
+    "zod": "^3.22.2"
   }
 }

packages/plugins/NextID/src/SiteAdaptor/VerificationPayload.tsx

@@ -0,0 +1,46 @@
+import { EmojiAvatar } from '@masknet/shared'
+import { makeStyles } from '@masknet/theme'
+import { Button, Typography } from '@mui/material'
+import { memo } from 'react'
+import { useNextID_Trans } from '../locales/i18n_generated.js'
+
+const useStyles = makeStyles()((theme) => ({
+    container: {
+        padding: theme.spacing(1.5),
+        display: 'flex',
+        alignItems: 'center',
+    },
+    text: {
+        flexGrow: 1,
+        color: theme.palette.maskColor.main,
+        marginLeft: theme.spacing(1.5),
+        marginRight: theme.spacing(1.5),
+        fontSize: 14,
+        wordBreak: 'break-all',
+    },
+    button: {
+        width: 42,
+    },
+}))
+
+interface Props {
+    pubkey: string
+}
+export const VerificationPayload = memo(function VerificationPayload({ pubkey }: Props) {
+    const { classes } = useStyles()
+    const t = useNextID_Trans()
+    return (
+        <div className={classes.container}>
+            <EmojiAvatar value={pubkey} size={40} />
+            <Typography className={classes.text}>{pubkey}</Typography>
+            <Button
+                className={classes.button}
+                variant="roundedContained"
+                href={`https://web3.bio/?s=${pubkey}`}
+                target="_blank"
+                rel="noopener noreferrer">
+                {t.view()}
+            </Button>
+        </div>
+    )
+})

packages/plugins/NextID/src/SiteAdaptor/index.tsx

@@ -1,10 +1,54 @@
 import type { Plugin } from '@masknet/plugin-infra'
+import { usePluginWrapper, usePostInfoDetails } from '@masknet/plugin-infra/content-script'
+import { NextIDPlatform } from '@masknet/shared-base'
+import { NextIDProof } from '@masknet/web3-providers'
+import { useQuery } from '@tanstack/react-query'
+import { useMemo } from 'react'
+import { z } from 'zod'
 import { base } from '../base.js'
-import { PLUGIN_ID } from '../constants.js'
 import { NextIdPage } from '../components/NextIdPage.js'
+import { PLUGIN_ID } from '../constants.js'
+import { VerificationPayload } from './VerificationPayload.js'
+
+function createSchema() {
+    return z.object({
+        type: z.literal('tuple'),
+        items: z.tuple([
+            z.object({
+                type: z.literal('text'),
+                content: z.string(),
+            }),
+            z.any(),
+        ]),
+    })
+}
 
 const site: Plugin.SiteAdaptor.Definition = {
     ...base,
+    PostInspector: function VerificationPayloadInspector() {
+        const raw = usePostInfoDetails.rawMessage()
+        const author = usePostInfoDetails.author()
+        const payload = useMemo(() => {
+            const schema = createSchema()
+            const result = schema.safeParse(raw)
+
+            if (!result.success) return null
+            const PAYLOAD_RE = /^🎭 {2}Verify {2}@.*? {2}with {2}@NextDotID .\nSig: .*\nMisc: /
+            return result.data.items.find((x) => x.type === 'text' && x.content.match(PAYLOAD_RE))?.content
+        }, [raw])
+
+        const enabled = !!payload && !!author?.userId
+        const { data: pubkey } = useQuery({
+            enabled,
+            queryKey: ['next-id', 'restore-pubkey', author?.userId, payload],
+            queryFn: () => NextIDProof.restorePubkey(payload, NextIDPlatform.Twitter, author!.userId),
+        })
+
+        const available = enabled && !!pubkey
+        usePluginWrapper(available)
+
+        return available ? <VerificationPayload pubkey={pubkey} /> : null
+    },
     ProfileTabs: [
         {
             ID: `${PLUGIN_ID}_tabContent`,

packages/plugins/NextID/src/locales/en-US.json

@@ -39,6 +39,7 @@
     "please_connect_persona": "Please connect persona",
     "unbind_persona_tip": "Choose either your Persona or the currently connected wallet to sign to disconnect.",
     "unbind_wallet_tip": "Choose either your Persona or the currently connected wallet to sign to disconnect.",
+    "view": "View",
     "done": "Done",
     "confirm": "Confirm",
     "cancel": "Cancel",

packages/shared-base/src/constants.ts

@@ -30,4 +30,4 @@ export const UNIT_TEST_ERC20_ADDRESS = '0xdAC17F958D2ee523a2206206994597C13D831e
 export const EMPTY_LIST = Object.freeze([]) as never[]
 export const EMPTY_OBJECT = Object.freeze({}) as Record<string, never>
 
-export const DEFAULT_PLUGIN_PUBLISHER = { name: { fallback: 'Mask Network' }, link: 'https://mask.io/' }
+export const DEFAULT_PLUGIN_PUBLISHER = { name: { fallback: 'Web3.io' }, link: 'https://web3.bio/' }

packages/shared/src/UI/components/EmojiAvatar/index.tsx

@@ -6,9 +6,10 @@ import { EMOJI_LIST } from './constants.js'
 
 interface Props extends AvatarProps {
     value: string
+    size?: number
 }
 
-export function EmojiAvatar({ value, ...props }: Props) {
+export function EmojiAvatar({ value, size, ...props }: Props) {
     const theme = useTheme()
 
     const { emoji, backgroundColor } = useMemo(() => {
@@ -26,6 +27,8 @@ export function EmojiAvatar({ value, ...props }: Props) {
         <MuiAvatar
             style={{
                 backgroundColor,
+                height: size,
+                width: size,
             }}
             {...props}>
             {emoji}

packages/web3-providers/src/NextID/proof.ts

@@ -5,7 +5,7 @@ import {
     fromHex,
     toBase64,
     type BindingProof,
-    type NextIDAction,
+    NextIDAction,
     type NextIDBindings,
     type NextIDErrorBody,
     type NextIDIdentity,
@@ -206,6 +206,11 @@ interface CreatePayloadResponse {
     created_at: string
 }
 
+interface RestorePubkeyResponse {
+    /** hex public key */
+    public_key: string
+}
+
 type NeighborNode = {
     source: NextIDPlatform
     to: NextIDIdentity
@@ -558,6 +563,20 @@ export class NextIDProof {
               }
             : null
     }
+
+    static async restorePubkey(payload: string, platform: NextIDPlatform, identity: string) {
+        const url = urlcat(BASE_URL, '/v1/proof/restore_pubkey')
+        const response = await fetchJSON<RestorePubkeyResponse>(url, {
+            method: 'POST',
+            body: JSON.stringify({
+                action: NextIDAction.Create,
+                platform,
+                identity,
+                proof_post: payload,
+            }),
+        })
+        return response.public_key
+    }
 }
 
 function createBindingProofNodeFromNeighbor(nextIDIdentity: NextIDIdentity, source: NextIDPlatform) {