feat: instagram nft avater (DimensionDev#5718)

* feat: instagram nft avtar * fix: bugfix * fix: bugfix * fix: bugfix * fix: bugfix * chore: ui style * fix: web3 tab bugfix * fix: bugfix * chore: reply review
dmrazzy · Feb 25, 2022 · ce52461 · ce52461
1 parent a89e311
commit ce52461
Show file tree

Hide file tree

Showing 21 changed files with 656 additions and 74 deletions.
diff --git a/packages/injected-script/main/index.ts b/packages/injected-script/main/index.ts
@@ -1,5 +1,4 @@
 import './communicate'
 import './locationChange'
-import './user-agent'
 
 if (document.currentScript) document.currentScript.remove()
diff --git a/packages/injected-script/main/user-agent.ts b/packages/injected-script/main/user-agent.ts
diff --git a/packages/mask/shared-ui/locales/en-US.json b/packages/mask/shared-ui/locales/en-US.json
@@ -103,6 +103,8 @@
     "mask_network": "Mask Network",
     "import": "Import",
     "no_search_result": "No result",
+    "set_nft_profile_photo": "Set NFT Photo",
+    "use_nft": "Use NFT",
     "loading": "Loading...",
     "unlock": "Unlock",
     "payload_bad": "This post seems to be corrupted. Mask cannot decrypt it.",

diff --git a/packages/mask/shared/kv-storage.ts b/packages/mask/shared/kv-storage.ts
@@ -18,6 +18,11 @@ export const InMemoryStorages = {
         address: '',
         tokenId: '',
     }),
+    InstagramNFTEvent: createInMemoryKVStorage('InstagramNFTEvent', {
+        userId: '',
+        address: '',
+        tokenId: '',
+    }),
 }
 export const PersistentStorages = {
     Plugin: createPersistentKVStorage('plugin', {}),

diff --git a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx
@@ -82,15 +82,17 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
         flexDirection: 'row',
         marginTop: theme.spacing(1),
+        gap: 16,
     },
 }))
 
 export interface NFTAvatarProps extends withClasses<'root'> {
     onChange: (token: ERC721TokenDetailed) => void
+    hideWallet?: boolean
 }
 
 export function NFTAvatar(props: NFTAvatarProps) {
-    const { onChange } = props
+    const { onChange, hideWallet } = props
     const classes = useStylesExtends(useStyles(), props)
     const account = useAccount()
     const chainId = useChainId()
@@ -141,13 +143,15 @@ export function NFTAvatar(props: NFTAvatarProps) {
                     {account ? (
                         <Typography variant="body1" color="textPrimary" className={classes.account}>
                             {t('nft_wallet_label')}: {Utils?.formatAddress?.(account, 4) || account}
-                            <Button
-                                variant="text"
-                                onClick={openSelectProviderDialog}
-                                size="small"
-                                className={classes.changeButton}>
-                                {t('nft_wallet_change')}
-                            </Button>
+                            {!hideWallet ? (
+                                <Button
+                                    variant="text"
+                                    onClick={openSelectProviderDialog}
+                                    size="small"
+                                    className={classes.changeButton}>
+                                    {t('nft_wallet_change')}
+                                </Button>
+                            ) : null}
                         </Typography>
                     ) : null}
                 </Box>
@@ -174,12 +178,8 @@ export function NFTAvatar(props: NFTAvatarProps) {
                             <Button variant="outlined" size="small" onClick={() => setOpen_(true)}>
                                 {t('nft_button_add_collectible')}
                             </Button>
-                            <Button
-                                variant="contained"
-                                size="small"
-                                sx={{ marginLeft: 2 }}
-                                onClick={onClick}
-                                disabled={!selectedToken}>
+
+                            <Button variant="contained" size="small" onClick={onClick} disabled={!selectedToken}>
                                 {t('nft_button_set_avatar')}
                             </Button>
                         </Box>

diff --git a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadgeTimeline.tsx b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadgeTimeline.tsx
@@ -5,7 +5,7 @@ import { useNFTAvatar } from '../hooks'
 import type { AvatarMetaDB } from '../types'
 import { RainbowBox } from './RainbowBox'
 import type { RSS3_KEY_SNS } from '../constants'
-import { makeStyles } from '@masknet/theme'
+import { makeStyles, useStylesExtends } from '@masknet/theme'
 
 interface NFTBadgeTimelineProps extends withClasses<'root'> {
     userId: string
@@ -26,7 +26,7 @@ export function NFTBadgeTimeline(props: NFTBadgeTimelineProps) {
     const { loading, value: _avatar } = useNFTAvatar(userId, snsKey)
     const [avatar, setAvatar] = useState<AvatarMetaDB>()
     const [avatarId_, setAvatarId_] = useState('')
-    const { classes } = useStyles()
+    const classes = useStylesExtends(useStyles(), props)
 
     const onUpdate = (data: AvatarMetaDB) => {
         if (!data.address || !data.tokenId) {

diff --git a/packages/mask/src/plugins/Avatar/Services/index.ts b/packages/mask/src/plugins/Avatar/Services/index.ts
@@ -2,7 +2,7 @@ import type { NetworkPluginID } from '@masknet/plugin-infra'
 import type { AvatarMetaDB } from '../types'
 import { getNFTAvatarFromJSON } from './db'
 import { getUserAddress, setUserAddress } from './bind'
-import { getNFTAvatarFromRSS, saveNFTAvatarToRSS } from './rss3'
+import { deleteTargetCache, getNFTAvatarFromRSS, saveNFTAvatarToRSS } from './rss3'
 import type { RSS3_KEY_SNS } from '../constants'
 
 export async function getNFTAvatar(
@@ -20,6 +20,20 @@ export async function getNFTAvatar(
     return getNFTAvatarFromJSON(userId)
 }
 
+export async function clearCache(
+    userId: string,
+    network: string,
+    snsKey: RSS3_KEY_SNS,
+    networkPluginId?: NetworkPluginID,
+    chainId?: number,
+) {
+    const address = await getUserAddress(userId, network, networkPluginId, chainId)
+
+    if (address) {
+        deleteTargetCache(userId, address, snsKey)
+    }
+}
+
 export async function saveNFTAvatar(
     address: string,
     nft: AvatarMetaDB,

diff --git a/packages/mask/src/plugins/Avatar/Services/rss3.ts b/packages/mask/src/plugins/Avatar/Services/rss3.ts
@@ -23,6 +23,11 @@ export async function getNFTAvatarFromRSS(userId: string, address: string, snsKe
     return result?.nft
 }
 
+export function deleteTargetCache(userId: string, address: string, snsKey: RSS3_KEY_SNS) {
+    const key = `${address}, ${userId}, ${snsKey}`
+    cache.delete(key)
+}
+
 async function _getNFTAvatarFromRSS(
     userId: string,
     address: string,

diff --git a/packages/mask/src/plugins/Avatar/constants.ts b/packages/mask/src/plugins/Avatar/constants.ts
@@ -12,4 +12,5 @@ export const PLUGIN_DESCRIPTION = 'NFT Avatar'
 export enum RSS3_KEY_SNS {
     TWITTER = '_nfts',
     FACEBOOK = '_facebook_nfts',
+    INSTAGRAM = '_instagram_nfts',
 }
diff --git a/packages/mask/src/social-network-adaptor/instagram.com/collecting/identity.ts b/packages/mask/src/social-network-adaptor/instagram.com/collecting/identity.ts
@@ -3,14 +3,14 @@ import { delay } from '@dimensiondev/kit'
 import { ProfileIdentifier } from '@masknet/shared-base'
 import { creator, SocialNetworkUI as Next } from '../../../social-network'
 import { instagramBase } from '../base'
-import { searchAvatarSelector } from '../utils/selector'
+import { searchInstagramAvatarSelector } from '../utils/selector'
 import { getAvatar, getBioDescription, getNickname, getPersonalHomepage, getUserId } from '../utils/user'
 
 function resolveCurrentVisitingIdentityInner(
     ref: Next.CollectingCapabilities.IdentityResolveProvider['recognized'],
     cancel: AbortSignal,
 ) {
-    const avatarSelector = searchAvatarSelector()
+    const avatarSelector = searchInstagramAvatarSelector()
     const assign = async () => {
         await delay(500)
         const bio = getBioDescription()

diff --git a/...ages/mask/src/social-network-adaptor/instagram.com/injection/NFT/NFTAvatarEditProfile.tsx b/...ages/mask/src/social-network-adaptor/instagram.com/injection/NFT/NFTAvatarEditProfile.tsx
@@ -0,0 +1,50 @@
+import { MutationObserverWatcher } from '@dimensiondev/holoflows-kit'
+import { searchInstagramAvatarSettingDialog, searchInstagramProfileAvatarButtonSelector } from '../../utils/selector'
+import { createReactRootShadowed, MaskMessages, startWatch } from '../../../../utils'
+import { useCallback } from 'react'
+import { makeStyles } from '@masknet/theme'
+import { NFTAvatarButton } from '../../../../plugins/Avatar/SNSAdaptor/NFTAvatarButton'
+import { NFTAvatarSettingDialog } from './NFTAvatarSettingDialog'
+import { useLocation } from 'react-use'
+
+export function injectOpenNFTAvatarEditProfileButton(signal: AbortSignal) {
+    const watcher = new MutationObserverWatcher(searchInstagramProfileAvatarButtonSelector())
+    startWatch(watcher, signal)
+    createReactRootShadowed(watcher.firstDOMProxy.afterShadow, { signal }).render(
+        <OpenNFTAvatarEditProfileButtonInInstagram />,
+    )
+
+    const dialogWatcher = new MutationObserverWatcher(searchInstagramAvatarSettingDialog())
+    startWatch(dialogWatcher, signal)
+    createReactRootShadowed(dialogWatcher.firstDOMProxy.afterShadow, { signal }).render(<NFTAvatarSettingDialog />)
+}
+
+const useStyles = makeStyles()(() => ({
+    root: {
+        marginTop: 5,
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        background: '#262626',
+        borderRadius: '4px !important',
+        height: 30,
+        width: 104,
+    },
+    text: {
+        fontSize: 12,
+        color: '#ffffff',
+        lineHeight: '12px',
+    },
+}))
+
+function OpenNFTAvatarEditProfileButtonInInstagram() {
+    const location = useLocation()
+    const onClick = useCallback(() => {
+        MaskMessages.events.nftAvatarSettingDialogUpdated.sendToLocal({ open: true })
+    }, [])
+
+    const { classes } = useStyles()
+
+    if (location.pathname?.includes('/edit')) return null
+
+    return <NFTAvatarButton onClick={onClick} classes={classes} />
+}