fix: adjust selector (DimensionDev#5745)

dmrazzy · Mar 1, 2022 · 720c49e · 720c49e
1 parent 47b095b
commit 720c49e
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 21 deletions.
diff --git a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx
@@ -155,7 +155,7 @@ export function NFTAvatar(props: NFTAvatarProps) {
                         </Typography>
                     ) : null}
                 </Box>
-                <EthereumChainBoundary chainId={chainId}>
+                <EthereumChainBoundary hiddenConnectButton chainId={chainId}>
                     <Box className={classes.galleryItem}>
                         <Box className={classes.gallery}>
                             {state !== SocketState.done && collectibles.length === 0

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
@@ -1,7 +1,11 @@
 import { MutationObserverWatcher } from '@dimensiondev/holoflows-kit'
-import { searchInstagramAvatarSettingDialog, searchInstagramProfileAvatarButtonSelector } from '../../utils/selector'
+import {
+    searchInstagramAvatarSettingDialog,
+    searchInstagramProfileAvatarButtonSelector,
+    searchInstagramProfileEditButton,
+} from '../../utils/selector'
 import { createReactRootShadowed, MaskMessages, startWatch } from '../../../../utils'
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 import { makeStyles } from '@masknet/theme'
 import { NFTAvatarButton } from '../../../../plugins/Avatar/SNSAdaptor/NFTAvatarButton'
 import { NFTAvatarSettingDialog } from './NFTAvatarSettingDialog'
@@ -44,7 +48,9 @@ function OpenNFTAvatarEditProfileButtonInInstagram() {
 
     const { classes } = useStyles()
 
-    if (location.pathname?.includes('/edit')) return null
+    const editButton = useMemo(() => searchInstagramProfileEditButton().evaluate(), [location.pathname])
+
+    if (location.pathname?.includes('/edit') || !editButton) return null
 
     return <NFTAvatarButton onClick={onClick} classes={classes} />
 }
diff --git a/packages/mask/src/social-network-adaptor/instagram.com/utils/selector.ts b/packages/mask/src/social-network-adaptor/instagram.com/utils/selector.ts
@@ -35,7 +35,7 @@ export const searchUserIdSelector = () =>
     querySelector<HTMLHeadingElement>('[id="react-root"] section main header section h2')
 
 export const searchUserIdInEditPageSelector = () =>
-    querySelector('[id="react-root"] button[title="Change Profile Photo"] > img').closest(4).querySelector('h1')
+    querySelector('[id="react-root"] button > img').closest(4).querySelector('h1')
 
 export const searchProfileTabArticlePageSelector = () =>
     querySelector<E>('[id="react-root"] section main div[role="tablist"]')
@@ -47,30 +47,28 @@ export const searchInstagramAvatarListSelector = () =>
     querySelector('[role="dialog"] .piCib > div > form').closest(1).querySelector('button')
 
 export const searchInstagramAvatarOpenFilesSelector = () =>
-    querySelector('[id="react-root"] button[title="Change Profile Photo"] > img')
-        .closest(4)
-        .querySelector<HTMLFormElement>('form')
+    querySelector('[id="react-root"] button > img').closest(4).querySelector<HTMLFormElement>('form')
 
 export const searchInstagramSaveAvatarButtonSelector = () =>
     querySelector<HTMLButtonElement>('section > div > header > div > div:last-child > button')
 
 export const searchInstagramAvatarSelector = () =>
-    querySelector('[id="react-root"] header img[alt="Change Profile Photo"], img[data-testid="user-avatar"]')
+    querySelector('[id="react-root"] header img, img[data-testid="user-avatar"]')
 
 export const searchInstagramProfileAvatarButtonSelector = () =>
-    querySelector('[id="react-root"] button[title="Change Profile Photo"] > img').closest<HTMLDivElement>(3)
+    querySelector('[id="react-root"] button > img').closest<HTMLDivElement>(3)
 
 export const searchInstagramAvatarSettingDialog = () => querySelector<E>('[id="react-root"]')
 
 export const searchInstagramAvatarUploadLoadingSelector = () =>
-    querySelector('[id="react-root"] button[title="Change Profile Photo"]')
+    querySelector('[id="react-root"] button')
         .closest(1)
         .querySelector<HTMLDivElement>('div[data-visualcompletion="loading-state"]')
 
 export const searchInstagramProfileSettingButtonSelector = () =>
-    querySelector('[id="react-root"] header button[title="Change Profile Photo"]')
-        .closest(4)
-        .querySelector('section > div > div')
+    querySelector('[id="react-root"] header button').closest(4).querySelector('section > div > div')
+
+export const searchInstagramProfileEditButton = () => querySelector('[id="react-root"] a[href="/accounts/edit/"]')
 
 export const searchInstagramPostAvatarSelector = () =>
     new LiveSelector<HTMLImageElement, false>().querySelectorAll<HTMLImageElement>(

diff --git a/packages/mask/src/web3/UI/EthereumChainBoundary.tsx b/packages/mask/src/web3/UI/EthereumChainBoundary.tsx
@@ -35,6 +35,7 @@ export interface EthereumChainBoundaryProps extends withClasses<'switchButton'>
     chainId: ChainId
     noSwitchNetworkTip?: boolean
     disablePadding?: boolean
+    hiddenConnectButton?: boolean
     switchButtonStyle?: SxProps<Theme>
     children?: React.ReactNode
     isValidChainId?: (actualChainId: ChainId, expectedChainId: ChainId) => boolean
@@ -148,13 +149,15 @@ export function EthereumChainBoundary(props: EthereumChainBoundaryProps) {
                 <Typography color="textPrimary">
                     <span>{t('plugin_wallet_connect_wallet_tip')}</span>
                 </Typography>
-                <ActionButton
-                    variant="contained"
-                    size="small"
-                    sx={{ marginTop: 1.5 }}
-                    onClick={openSelectProviderDialog}>
-                    {t('plugin_wallet_connect_wallet')}
-                </ActionButton>
+                {!props.hiddenConnectButton ? (
+                    <ActionButton
+                        variant="contained"
+                        size="small"
+                        sx={{ marginTop: 1.5 }}
+                        onClick={openSelectProviderDialog}>
+                        {t('plugin_wallet_connect_wallet')}
+                    </ActionButton>
+                ) : null}
             </>,
         )