{this.props.children || null}
diff --git a/packages/mask/src/plugins/Pets/SNSAdaptor/ImageLoader.tsx b/packages/mask/src/plugins/Pets/SNSAdaptor/ImageLoader.tsx
new file mode 100644
index 000000000000..2ad992cd6ae5
--- /dev/null
+++ b/packages/mask/src/plugins/Pets/SNSAdaptor/ImageLoader.tsx
@@ -0,0 +1,21 @@
+import { CircularProgress } from '@mui/material'
+import { ImgHTMLAttributes, useState, SyntheticEvent } from 'react'
+import { DefaultIcon } from '../constants'
+
+export function ImageLoader(props: ImgHTMLAttributes
+
+
+
+ {showMeta?.word}
+
+
+ ) : null}
+
+
+ )
+}
diff --git a/packages/mask/src/plugins/Pets/SNSAdaptor/ModelView.tsx b/packages/mask/src/plugins/Pets/SNSAdaptor/ModelView.tsx
new file mode 100644
index 000000000000..6816c115800a
--- /dev/null
+++ b/packages/mask/src/plugins/Pets/SNSAdaptor/ModelView.tsx
@@ -0,0 +1,68 @@
+import { FC, HTMLProps, useMemo } from 'react'
+import { AssetPlayer } from '@masknet/shared'
+import { makeStyles } from '@masknet/theme'
+
+interface ModelViewProps extends HTMLProps
+
+
+
+
+ 
+
+ {start && showMeta?.word ? (
+
+
+ )
+ }, [source])
+}
+
+export default ModelView
diff --git a/packages/mask/src/plugins/Pets/SNSAdaptor/NormalNFT.tsx b/packages/mask/src/plugins/Pets/SNSAdaptor/NormalNFT.tsx
new file mode 100644
index 000000000000..c0c2b93a862c
--- /dev/null
+++ b/packages/mask/src/plugins/Pets/SNSAdaptor/NormalNFT.tsx
@@ -0,0 +1,99 @@
+import { makeStyles, useStylesExtends } from '@masknet/theme'
+import { Box } from '@mui/material'
+import { useStyles as useBoxStyles } from './PreviewBox'
+import classNames from 'classnames'
+import Drag from './Drag'
+import type { ShowMeta } from '../types'
+import { CloseIcon } from '../constants'
+
+const useStyles = makeStyles()(() => ({
+ root: {
+ position: 'fixed',
+ top: 0,
+ left: 0,
+ },
+ imgContent: {
+ zIndex: 999,
+ width: '100%',
+ height: '100%',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ imgBox: {
+ width: '80%',
+ height: '80%',
+ textAlign: 'center',
+ },
+ close: {
+ width: 15,
+ height: 15,
+ cursor: 'pointer',
+ backgroundSize: 'contain',
+ position: 'absolute',
+ top: 0,
+ right: 0,
+ },
+ wordContent: {
+ display: 'flex',
+ justifyContent: 'center',
+ },
+ wordBox: {
+ position: 'absolute',
+ maxWidth: 150,
+ bottom: 150,
+ },
+ dragImg: {
+ width: 15,
+ height: 15,
+ },
+}))
+
+interface NormalNFTProps {
+ start: boolean
+ infoShow: boolean
+ showMeta: ShowMeta | undefined
+ handleClose: () => void
+}
+
+export function NormalNFT(props: NormalNFTProps) {
+ const { start, infoShow, showMeta, handleClose } = props
+ const classes = useStylesExtends(useStyles(), {})
+ const boxClasses = useStylesExtends(useBoxStyles(), {})
+
+ return (
+
+ 
+
+
+ {props.message && (
+ 
+ ))}
+ {!(props.message || props.imageUrl) && (
+
+ )
+}
diff --git a/packages/mask/src/plugins/Pets/SNSAdaptor/animate.tsx b/packages/mask/src/plugins/Pets/SNSAdaptor/animate.tsx
deleted file mode 100644
index 22abc0b7888a..000000000000
--- a/packages/mask/src/plugins/Pets/SNSAdaptor/animate.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { useEffect, useState } from 'react'
-import { makeStyles, useStylesExtends } from '@masknet/theme'
-import { getAssetAsBlobURL } from '../../../utils'
-import Drag from './drag'
-import AnimatedMessage from './animatedMsg'
-import Tip from './tooltip'
-import { useCurrentVisitingIdentity } from '../../../components/DataSource/useActivatedUI'
-import { PetsPluginID } from '../constants'
-import { useIsMinimalMode } from '@masknet/plugin-infra'
-
-const useStyles = makeStyles()(() => ({
- root: {
- position: 'fixed',
- top: 0,
- left: 0,
- },
- img: {
- zIndex: 999,
- width: '100%',
- height: '100%',
- backgroundSize: 'contain',
- },
- close: {
- width: 15,
- height: 15,
- cursor: 'pointer',
- backgroundSize: 'contain',
- position: 'absolute',
- top: 0,
- right: -10,
- },
-}))
-
-const AnimatePic = () => {
- const classes = useStylesExtends(useStyles(), {})
- const Background = getAssetAsBlobURL(new URL('../assets/loot.gif', import.meta.url))
- const Close = getAssetAsBlobURL(new URL('../assets/close.png', import.meta.url))
-
- const [show, setShow] = useState(false)
- const [infoShow, setInfoShow] = useState(false)
- const disabled = useIsMinimalMode(PetsPluginID)
-
- const identity = useCurrentVisitingIdentity()
- useEffect(() => {
- const userId = identity.identifier.userId
- const maskId = 'realMaskNetwork'
- setShow(!disabled && userId === maskId)
- }, [identity, disabled])
-
- const handleClose = () => setShow(false)
- const handleMouseEnter = () => setInfoShow(true)
- const handleMouseLeave = () => setInfoShow(false)
-
- return (
-
+ {props.message}
+
+ )}
+ {props.imageUrl &&
+ (props.tokenInfo?.glbSupport ? (
+
+
+ ) : (
+
+ {t('plugin_pets_dialog_preview')}
+
+ )}
+
- {show ? (
-
-
- ) : null}
-
- )
-}
-
-export default AnimatePic
diff --git a/packages/mask/src/plugins/Pets/SNSAdaptor/animatedMsg.tsx b/packages/mask/src/plugins/Pets/SNSAdaptor/animatedMsg.tsx
deleted file mode 100644
index efbec66f757e..000000000000
--- a/packages/mask/src/plugins/Pets/SNSAdaptor/animatedMsg.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import React from 'react'
-import { makeStyles } from '@masknet/theme'
-import { CSSTransition } from 'react-transition-group'
-import { useI18N } from '../../../utils'
-
-const useStyles = makeStyles()(() => ({
- txt: {
- position: 'absolute',
- opacity: 0,
- top: -40,
- fontSize: '12px',
- color: '#737373',
- fontWeight: 600,
- width: '150%',
- fontFamily: 'TwitterChirp',
- },
- enter: {
- left: 150,
- opacity: 0,
- },
- enterActive: {
- left: 0,
- opacity: 1,
- transition: 'all 1500ms ease-in',
- },
- enterDone: {
- left: 0,
- opacity: 1,
- },
- exitActive: {
- left: 150,
- opacity: 0,
- transition: 'all 1500ms ease-out',
- },
-}))
-
-const AnimatedMessage = () => {
- const { t } = useI18N()
- const { classes } = useStyles()
- const [start, setStart] = React.useState(false)
- const txts = [
- t('plugin_pets_loot_des_0'),
- t('plugin_pets_loot_des_1'),
- t('plugin_pets_loot_des_2'),
- t('plugin_pets_loot_des_3'),
- t('plugin_pets_loot_des_4'),
- t('plugin_pets_loot_des_5'),
- t('plugin_pets_loot_des_6'),
- t('plugin_pets_loot_des_7'),
- t('plugin_pets_loot_des_8'),
- t('plugin_pets_loot_des_9'),
- t('plugin_pets_loot_des_10'),
- t('plugin_pets_loot_des_11'),
- t('plugin_pets_loot_des_12'),
- t('plugin_pets_loot_des_13'),
- t('plugin_pets_loot_des_14'),
- ]
-
- const [show, setShow] = React.useState(txts[0])
-
- React.useEffect(() => {
- let count = 0
- const timer = setInterval(() => {
- setStart(count % 9 < 5)
- count = count + 1
- }, 1000 * 1)
- return () => {
- clearInterval(timer)
- }
- }, [])
-
- React.useEffect(() => {
- if (start) return
- const timer = setTimeout(() => {
- const idx = Math.round(Math.random() * (txts.length - 1))
- setShow(txts[idx])
- }, 1500)
- return () => {
- clearInterval(timer)
- }
- }, [start])
-
- return (
- {show}
-
-
- {t('plugin_pets_loot_properties')}
-
- {loots.map((txt) => (
-
- {txt}
-
- ))}
-
- {t('plugin_pets_get_nft_shows')}
-
-
-
- https://twitter.com/MintTeamNFT
-
-
-
- )
- return (
-