feat: facebook nft avatar

cspell.json

@@ -174,6 +174,7 @@
         "popperjs",
         "porportion",
         "presale",
+        "pressable",
         "progressbar",
         "promi",
         "proxied",

packages/injected-script/main/EventListenerPatch/hookInputUploadOnce.ts

@@ -7,7 +7,25 @@ const proto = HTMLInputElement.prototype
 const { defineProperty, deleteProperty } = Reflect
 const setTimeoutCaptured = setTimeout.bind(window)
 const clearTimeoutCaptured = clearTimeout.bind(window)
-export function hookInputUploadOnce(...[format, fileName, fileArray]: InternalEvents['hookInputUploadOnce']) {
+
+/**
+ * This API can mock a file upload in React applications when injected script has been injected into the page.
+ *
+ * If the <input type='file' /> element is available, you can use the API like this:
+ *     input.focus()
+ *     hookInputUploadOnce(format, fileName, file, true)
+ *
+ * If the <input type='file' /> is dynamically generated after the user clicks "Upload" button on the web page, you can use the API like this:
+ *     hookInputUploadOnce(format, fileName, file, false)
+ *     uploadButton.click()
+ * @param format
+ * @param fileName
+ * @param fileArray
+ * @param triggerOnActiveElementNow
+ */
+export function hookInputUploadOnce(
+    ...[format, fileName, fileArray, triggerOnActiveElementNow]: InternalEvents['hookInputUploadOnce']
+) {
     let timer: ReturnType<typeof setTimeout> | null = null
     const e = new no_xray_Event('change', {
         bubbles: true,
@@ -36,4 +54,8 @@ export function hookInputUploadOnce(...[format, fileName, fileArray]: InternalEv
             deleteProperty(this, 'files')
         }, 200)
     }
+
+    if (triggerOnActiveElementNow && document.activeElement instanceof HTMLInputElement) {
+        document.activeElement?.click()
+    }
 }

packages/injected-script/sdk/index.ts

@@ -20,8 +20,13 @@ export function pasteInstagram(url: string) {
 export function inputText(text: string) {
     sendEvent('input', text)
 }
-export function hookInputUploadOnce(format: string, fileName: string, image: Uint8Array) {
-    sendEvent('hookInputUploadOnce', format, fileName, Array.from(image))
+export function hookInputUploadOnce(
+    format: string,
+    fileName: string,
+    image: Uint8Array,
+    triggerOnActiveElementNow = false,
+) {
+    sendEvent('hookInputUploadOnce', format, fileName, Array.from(image), triggerOnActiveElementNow)
 }
 
 document.addEventListener(CustomEventId, (e) => {

packages/injected-script/shared/index.ts

@@ -17,7 +17,7 @@ export interface InternalEvents {
      * How to use:
      * Call this event, then invoke the file selector (SNS). It will invoke click on some input, then let's replace with the result.
      */
-    hookInputUploadOnce: [format: string, fileName: string, file: number[]]
+    hookInputUploadOnce: [format: string, fileName: string, file: number[], triggerOnActiveElementNow: boolean]
 
     // #region Eth inpage provider bridge
     /** Request the bridge to listen on an event. */

packages/mask/shared/kv-storage.ts

@@ -12,6 +12,12 @@ const createInMemoryKVStorage = createKVStorageHost(inMemoryBackend, MaskMessage
 
 export const InMemoryStorages = {
     Plugin: createInMemoryKVStorage('plugin', {}),
+    FacebookNFTEventOnMobile: createInMemoryKVStorage('FacebookNFTEventOnMobile', {
+        userId: '',
+        avatarId: '',
+        address: '',
+        tokenId: '',
+    }),
 }
 export const PersistentStorages = {
     Plugin: createPersistentKVStorage('plugin', {}),

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

@@ -480,8 +480,6 @@ function SetupGuideUI(props: SetupGuideUIProps) {
         let content = t('setup_guide_say_hello_content')
         if (ui.networkIdentifier === 'twitter.com') {
             content += t('setup_guide_say_hello_follow', { account: '@realMaskNetwork' })
-        } else if (ui.networkIdentifier === 'facebook.com') {
-            content += t('setup_guide_say_hello_follow', { account: '@masknetwork' })
         }
 
         ui.automation.maskCompositionDialog?.open?.(makeTypedMessageText(content), {

packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatarButton.tsx

@@ -30,6 +30,7 @@ const useStyles = makeStyles()((theme) => ({
 
 interface NFTAvatarButtonProps extends withClasses<'root'> {
     onClick: () => void
+    showSetting?: boolean
 }
 
 export function NFTAvatarButton(props: NFTAvatarButtonProps) {
@@ -40,7 +41,9 @@ export function NFTAvatarButton(props: NFTAvatarButtonProps) {
     return (
         <div className={classes.root} onClick={onClick}>
             <Typography variant="body1" className={classes.text}>
-                &#x1F525;{t('nft_avatar')} <GearSettingsIcon className={classes.icon} />
+                &#x1F525;
+                <span style={{ marginLeft: 4 }}>{t('nft_avatar')}</span>
+                {props.showSetting ? <GearSettingsIcon className={classes.icon} /> : null}
             </Typography>
         </div>
     )

packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatarRing.tsx

@@ -5,6 +5,16 @@ const useStyles = makeStyles()((theme) => ({
     root: {
         overflow: 'unset',
     },
+    container: {
+        boxShadow: '0 5px 15px rgba(0, 248, 255, 0.4), 0 10px 30px rgba(37, 41, 46, 0.2)',
+        transition: 'none',
+        borderRadius: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        lineHeight: 0,
+        border: '2px solid #00f8ff',
+    },
 }))
 interface NFTAvatarRingProps {
     stroke: string
@@ -14,88 +24,78 @@ interface NFTAvatarRingProps {
     price: string
     width: number
     id: string
+    hasRainbow?: boolean
 }
 
 export function NFTAvatarRing(props: NFTAvatarRingProps) {
     const { classes } = useStyles()
-    const { stroke, strokeWidth, fontSize, text, width, id, price } = props
+    const { stroke, strokeWidth, fontSize, text, width, id, price, hasRainbow = true } = props
 
     const avatarSize = width + 1
     const R = avatarSize / 2
     const path_r = R - strokeWidth + fontSize / 2
     const x1 = R - path_r
     const y1 = R
     const x2 = R + path_r
-    return (
-        <RainbowBox>
-            <svg
-                className={classes.root}
-                width="100%"
-                height="100%"
-                viewBox={`0 0 ${avatarSize} ${avatarSize}`}
-                id={id}>
-                <defs>
-                    <path
-                        id={`${id}-path-name`}
-                        fill="none"
-                        stroke="none"
-                        strokeWidth="0"
-                        d={`M${x1} ${y1} A${path_r} ${path_r} 0 1 1 ${x2} ${y1}`}
-                    />
-                    <path
-                        id={`${id}-path-price`}
-                        fill="none"
-                        stroke="none"
-                        strokeWidth="0"
-                        d={`M${x1} ${y1} A${path_r} ${path_r} 0 1 0 ${x2} ${y1}`}
-                    />
-                    <linearGradient id={`${id}-gradient`} x1="0%" y1="0%" x2="100%" y2="0">
-                        <stop offset="0%" stopColor="#00f8ff" />
-                        <stop offset="20%" stopColor="#a4ff00" />
-                        <stop offset="40%" stopColor="#f7275e" />
-                        <stop offset="60%" stopColor="#ffd300" />
-                        <stop offset="80%" stopColor="#ff8a00" />
-                        <stop offset="100%" stopColor="#00f8ff" />
-                    </linearGradient>
-                </defs>
 
-                <circle
-                    cx={R}
-                    cy={R}
-                    r={R - strokeWidth / 2 + 1}
+    const svgNode = (
+        <svg className={classes.root} width="100%" height="100%" viewBox={`0 0 ${avatarSize} ${avatarSize}`} id={id}>
+            <defs>
+                <path
+                    id={`${id}-path-name`}
+                    fill="none"
+                    stroke="none"
+                    strokeWidth="0"
+                    d={`M${x1} ${y1} A${path_r} ${path_r} 0 1 1 ${x2} ${y1}`}
+                />
+                <path
+                    id={`${id}-path-price`}
                     fill="none"
-                    stroke={stroke}
-                    strokeWidth={strokeWidth}
+                    stroke="none"
+                    strokeWidth="0"
+                    d={`M${x1} ${y1} A${path_r} ${path_r} 0 1 0 ${x2} ${y1}`}
                 />
-                <pattern id={`${id}-pattern`} x="0" y="0" width="300%" height="100%" patternUnits="userSpaceOnUse">
-                    <circle cx={R} cy={R} r={R} fill={`url(#${id}-gradient)`}>
-                        <animateTransform
-                            attributeName="transform"
-                            type="rotate"
-                            dur="10s"
-                            repeatCount="indefinite"
-                            from={`0 ${R} ${R}`}
-                            to={`360 ${R} ${R}`}
-                        />
-                    </circle>
-                </pattern>
+                <linearGradient id={`${id}-gradient`} x1="0%" y1="0%" x2="100%" y2="0">
+                    <stop offset="0%" stopColor="#00f8ff" />
+                    <stop offset="20%" stopColor="#a4ff00" />
+                    <stop offset="40%" stopColor="#f7275e" />
+                    <stop offset="60%" stopColor="#ffd300" />
+                    <stop offset="80%" stopColor="#ff8a00" />
+                    <stop offset="100%" stopColor="#00f8ff" />
+                </linearGradient>
+            </defs>
+
+            <circle cx={R} cy={R} r={R - strokeWidth / 2 + 1} fill="none" stroke={stroke} strokeWidth={strokeWidth} />
+            <pattern id={`${id}-pattern`} x="0" y="0" width="300%" height="100%" patternUnits="userSpaceOnUse">
+                <circle cx={R} cy={R} r={R} fill={`url(#${id}-gradient)`}>
+                    <animateTransform
+                        attributeName="transform"
+                        type="rotate"
+                        dur="10s"
+                        repeatCount="indefinite"
+                        from={`0 ${R} ${R}`}
+                        to={`360 ${R} ${R}`}
+                    />
+                </circle>
+            </pattern>
 
-                <text x="0%" textAnchor="middle" fill={`url(#${id}-pattern)`} fontFamily="sans-serif">
-                    <textPath xlinkHref={`#${id}-path-name`} startOffset="50%" rotate="auto">
-                        <tspan fontWeight="bold" fontSize={fontSize}>
-                            {text}
-                        </tspan>
-                    </textPath>
-                </text>
+            <text x="0%" textAnchor="middle" fill={`url(#${id}-pattern)`} fontFamily="sans-serif">
+                <textPath xlinkHref={`#${id}-path-name`} startOffset="50%" rotate="auto">
+                    <tspan fontWeight="bold" fontSize={fontSize}>
+                        {text}
+                    </tspan>
+                </textPath>
+            </text>
 
-                <text x="0%" textAnchor="middle" fill={`url(#${id}-pattern)`} fontFamily="sans-serif">
-                    <textPath xlinkHref={`#${id}-path-price`} startOffset="50%" rotate="auto">
-                        <tspan fontWeight="bold" fontSize={fontSize} dy="0.5em">
-                            {price}
-                        </tspan>
-                    </textPath>
-                </text>
-            </svg>
-        </RainbowBox>
+            <text x="0%" textAnchor="middle" fill={`url(#${id}-pattern)`} fontFamily="sans-serif">
+                <textPath xlinkHref={`#${id}-path-price`} startOffset="50%" rotate="auto">
+                    <tspan fontWeight="bold" fontSize={fontSize} dy="0.5em">
+                        {price}
+                    </tspan>
+                </textPath>
+            </text>
+        </svg>
     )
+
+    return hasRainbow ? <RainbowBox>{svgNode}</RainbowBox> : <div className={classes.container}>{svgNode}</div>
 }

packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx

@@ -22,10 +22,11 @@ interface NFTBadgeProps extends withClasses<'root' | 'text' | 'icon'> {
     avatar: AvatarMetaDB
     size?: number
     width?: number
+    hasRainbow?: boolean
 }
 
 export function NFTBadge(props: NFTBadgeProps) {
-    const { avatar, size = 140 } = props
+    const { avatar, size = 140, hasRainbow } = props
     const classes = useStylesExtends(useStyles(), props)
 
     const { value = { amount: '0', symbol: 'ETH', name: '', slug: '' }, loading } = useNFT(
@@ -48,6 +49,7 @@ export function NFTBadge(props: NFTBadgeProps) {
                     width={size}
                     strokeWidth={14}
                     stroke="black"
+                    hasRainbow={hasRainbow}
                     fontSize={9}
                     text={
                         loading

packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadgeTimeline.tsx

@@ -4,17 +4,19 @@ import { MaskMessages } from '../../../utils'
 import { useNFTAvatar } from '../hooks'
 import type { AvatarMetaDB } from '../types'
 import { RainbowBox } from './RainbowBox'
+import type { RSS3_KEY_SNS } from '../constants'
 
 interface NFTBadgeTimelineProps extends withClasses<'root'> {
     userId: string
     avatarId: string
     width: number
     height: number
+    snsKey: RSS3_KEY_SNS
 }
 
 export function NFTBadgeTimeline(props: NFTBadgeTimelineProps) {
-    const { userId, avatarId, width, height } = props
-    const { loading, value: _avatar } = useNFTAvatar(userId)
+    const { userId, avatarId, width, height, snsKey } = props
+    const { loading, value: _avatar } = useNFTAvatar(userId, snsKey)
     const [avatar, setAvatar] = useState<AvatarMetaDB>()
     const [avatarId_, setAvatarId_] = useState('')
 

packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadgeTweet.tsx

@@ -1,6 +1,7 @@
 import { makeStyles } from '@masknet/theme'
 import { useLastRecognizedIdentity } from '../../../components/DataSource/useActivatedUI'
 import { NFTBadgeTimeline } from './NFTBadgeTimeline'
+import type { RSS3_KEY_SNS } from '../constants'
 
 const useStyles = makeStyles()((theme) => ({
     root: {},
@@ -10,12 +11,21 @@ interface NFTBadgeTweetProps {
     avatarId: string
     width: number
     height: number
+    snsKey: RSS3_KEY_SNS
 }
 
 export function NFTBadgeTweet(props: NFTBadgeTweetProps) {
-    const { avatarId, width, height } = props
+    const { avatarId, width, height, snsKey } = props
     const identity = useLastRecognizedIdentity()
 
     if (!identity?.identifier.userId) return null
-    return <NFTBadgeTimeline width={width} height={height} userId={identity?.identifier.userId} avatarId={avatarId} />
+    return (
+        <NFTBadgeTimeline
+            width={width}
+            height={height}
+            userId={identity?.identifier.userId}
+            avatarId={avatarId}
+            snsKey={snsKey}
+        />
+    )
 }

packages/mask/src/plugins/Avatar/SNSAdaptor/NFTContractImage.tsx

@@ -2,6 +2,7 @@ import { makeStyles } from '@masknet/theme'
 import { CircularProgress } from '@mui/material'
 import { useNFTAvatar } from '../hooks'
 import { useNFTVerified } from '../hooks/useNFTVerified'
+import type { RSS3_KEY_SNS } from '../constants'
 
 const useStyles = makeStyles()((theme) => ({
     root: {},
@@ -13,13 +14,14 @@ const useStyles = makeStyles()((theme) => ({
 
 interface NFTContractImageProps {
     userId: string
+    snsKey: RSS3_KEY_SNS
 }
 
 export function NFTContractImage(props: NFTContractImageProps) {
-    const { userId } = props
+    const { userId, snsKey } = props
     const { classes } = useStyles()
 
-    const { loading: loadingNFT, value: NFTAvatar } = useNFTAvatar(userId)
+    const { loading: loadingNFT, value: NFTAvatar } = useNFTAvatar(userId, snsKey)
     const { loading, value: contract } = useNFTVerified(NFTAvatar?.address ?? '')
 
     return (

packages/mask/src/plugins/Avatar/SNSAdaptor/RainbowBox.tsx

@@ -31,7 +31,6 @@ interface StyleProps {
 }
 const useStyles = makeStyles<StyleProps>()((theme, { width, height, radius = '100%' }) => ({
     root: {
-        transform: 'scale(0.97)',
         animation: `${rainbowBorderKeyFrames} 6s linear infinite`,
         width,
         height,