fix: adjust instagram some dom selectors

packages/mask/shared-ui/locales/en-US.json

@@ -886,7 +886,7 @@
     "popups_social_account": "Social Accounts",
     "popups_connected_wallets": "Connected Wallets",
     "popups_loading": "Loading",
-    "popups_connect_your_web2_social_accounts": "Connect your web2 social accounts",
+    "popups_connect_your_web2_social_accounts": "Connect your social media accounts",
     "popups_connect_social_account": "Connect Social Account",
     "popups_disconnect_success": " Disconnect successfully. ",
     "popups_disconnect_failed": "Disconnect failed.",

packages/mask/src/plugins/Collectible/SNSAdaptor/OpenSea/ActionBar.tsx

@@ -8,9 +8,10 @@ import { MakeOfferDialog } from './MakeOfferDialog'
 import { PostListingDialog } from './PostListingDialog'
 import { CheckoutDialog } from './CheckoutDialog'
 import { ChainBoundary } from '../../../../web3/UI/ChainBoundary'
-import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
+import { useAccount } from '@masknet/plugin-infra/web3'
 import { isSameAddress, NetworkPluginID } from '@masknet/web3-shared-base'
 import { useAssetOrder } from '../../hooks/useAssetOrder'
+import { ChainId } from '@masknet/web3-shared-evm'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -35,7 +36,6 @@ export function ActionBar(props: ActionBarProps) {
     const { classes } = useStyles()
     const { asset } = CollectibleState.useContainer()
     const account = useAccount(NetworkPluginID.PLUGIN_EVM)
-    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const { value: assetOrder } = useAssetOrder(asset.value?.address, asset.value?.tokenId)
 
     const {
@@ -54,7 +54,10 @@ export function ActionBar(props: ActionBarProps) {
     const isOwner = isSameAddress(asset.value.owner?.address, account)
     return (
         <Box className={classes.root} sx={{ padding: 1.5 }} display="flex" justifyContent="center">
-            <ChainBoundary expectedPluginID={NetworkPluginID.PLUGIN_EVM} expectedChainId={chainId} renderInTimeline>
+            <ChainBoundary
+                expectedPluginID={NetworkPluginID.PLUGIN_EVM}
+                expectedChainId={ChainId.Mainnet}
+                renderInTimeline>
                 {!isOwner && asset.value.auction ? (
                     <ActionButton
                         className={classes.button}

packages/mask/src/social-network-adaptor/instagram.com/injection/NFT/ProfileNFTAvatar.tsx

@@ -1,14 +1,19 @@
 import { MutationObserverWatcher } from '@dimensiondev/holoflows-kit'
-import { searchInstagramAvatarListSelector } from '../../utils/selector'
+import { searchInstagramAvatarEditPageSettingDialog, searchInstagramAvatarListSelector } from '../../utils/selector'
 import { createReactRootShadowed, MaskMessages, startWatch, useI18N, useLocationChange } from '../../../../utils'
 import { makeStyles } from '@masknet/theme'
 import { useCallback, useLayoutEffect, useState } from 'react'
 import { useLocation } from 'react-use'
+import { NFTAvatarSettingDialog } from './NFTAvatarSettingDialog'
 
 export async function injectProfileNFTAvatarInInstagram(signal: AbortSignal) {
     const watcher = new MutationObserverWatcher(searchInstagramAvatarListSelector())
     startWatch(watcher, signal)
     createReactRootShadowed(watcher.firstDOMProxy.afterShadow, { signal }).render(<NFTAvatarButtonInDialog />)
+
+    const dialogWatcher = new MutationObserverWatcher(searchInstagramAvatarEditPageSettingDialog())
+    startWatch(dialogWatcher, signal)
+    createReactRootShadowed(dialogWatcher.firstDOMProxy.afterShadow, { signal }).render(<NFTAvatarSettingDialog />)
 }
 
 const useStyles = makeStyles<StyleProps>()((theme, props) => ({

packages/mask/src/social-network-adaptor/instagram.com/utils/selector.ts

@@ -41,7 +41,7 @@ export const searchUserIdSelector = () =>
     querySelector('#ssrb_root_start').closest(1).querySelector<HTMLHeadingElement>('section main header section h2')
 
 export const searchUserIdInEditPageSelector = () =>
-    querySelector('#ssrb_root_start').closest(1).querySelector('button > img').closest(4).querySelector('h1')
+    querySelector('#react-root').querySelector('button > img').closest(4).querySelector('h1')
 
 export const searchProfileTabArticlePageSelector = () =>
     querySelector('#ssrb_root_start').closest(1).querySelector<E>('section main div[role="tablist"]')
@@ -63,6 +63,8 @@ export const searchInstagramProfileAvatarButtonSelector = () =>
 
 export const searchInstagramAvatarSettingDialog = () => querySelector('#ssrb_root_start').closest<E>(1)
 
+export const searchInstagramAvatarEditPageSettingDialog = () => querySelector('#react-root')
+
 export const searchInstagramProfileSettingButtonSelector = () =>
     querySelector('#ssrb_root_start')
         .closest(1)
@@ -75,5 +77,5 @@ export const searchInstagramProfileEditButton = () =>
 
 export const searchInstagramPostAvatarSelector = () =>
     new LiveSelector<HTMLImageElement, false>().querySelectorAll<HTMLImageElement>(
-        '[role="button"] > a > img[data-testid="user-avatar"]',
+        '[role="button"] > a > img[crossorigin="anonymous"]',
     )

packages/plugin-infra/src/web3-state/Provider.ts

@@ -72,7 +72,7 @@ export class ProviderState<
         this.setupProviders()
     }
 
-    private setupSubscriptions() {
+    protected setupSubscriptions() {
         const site = this.site
         if (!site) return
 

packages/plugin-infra/src/web3/useFungibleAssets.ts

@@ -45,6 +45,7 @@ export function useFungibleAssets<S extends 'all' | void = void, T extends Netwo
             })
         })
         const assets = await asyncIteratorToArray(iterator)
+
         const filteredAssets = assets.length && schemaType ? assets.filter((x) => x.schema === schemaType) : assets
 
         return filteredAssets

packages/plugins/EVM/src/state/Provider.ts

@@ -12,7 +12,8 @@ import {
     isValidChainId,
 } from '@masknet/web3-shared-evm'
 import { Providers } from './Connection/provider'
-import { ExtensionSite } from '@masknet/shared-base'
+import { ExtensionSite, mapSubscription, mergeSubscription } from '@masknet/shared-base'
+import { getEnumAsArray } from '@dimensiondev/kit'
 
 export class Provider extends ProviderState<ChainId, ProviderType, NetworkType, Web3Provider, Web3> {
     constructor(context: Plugin.Shared.SharedContext) {
@@ -23,9 +24,42 @@ export class Provider extends ProviderState<ChainId, ProviderType, NetworkType,
             getDefaultChainId: () => ChainId.Mainnet,
             getDefaultNetworkType: () => NetworkType.Ethereum,
             getDefaultProviderType: (site) =>
-                site === ExtensionSite.Popup ? ProviderType.MaskWallet : ProviderType.None,
+                getEnumAsArray(ExtensionSite).some(({ value }) => value === site)
+                    ? ProviderType.MaskWallet
+                    : ProviderType.None,
             getNetworkTypeFromChainId: (chainId: ChainId) =>
                 chainResolver.chainNetworkType(chainId) ?? NetworkType.Ethereum,
         })
     }
+
+    override setupSubscriptions() {
+        const site = this.site
+        if (!site) return
+
+        this.providerType = mapSubscription(this.storage.providers.subscription, (providers) => providers[site])
+
+        this.chainId = mapSubscription(
+            mergeSubscription(this.providerType, this.storage.accounts.subscription, this.context.chainId),
+            ([providerType, accounts, chainId]) => {
+                if (providerType === ProviderType.MaskWallet) return chainId
+                return accounts[providerType].chainId
+            },
+        )
+        this.account = mapSubscription(
+            mergeSubscription(this.providerType, this.storage.accounts.subscription, this.context.account),
+            ([providerType, accounts, maskAccount]) => {
+                if (providerType === ProviderType.MaskWallet) return maskAccount
+
+                return accounts[providerType].account
+            },
+        )
+        this.networkType = mapSubscription(
+            mergeSubscription(this.providerType, this.storage.accounts.subscription, this.context.chainId),
+            ([providerType, accounts, chainId]) => {
+                if (providerType === ProviderType.MaskWallet) return this.options.getNetworkTypeFromChainId(chainId)
+
+                return this.options.getNetworkTypeFromChainId(accounts[providerType].chainId)
+            },
+        )
+    }
 }

packages/web3-providers/src/debank/index.ts

@@ -11,6 +11,7 @@ import {
 import { formatAssets, formatTransactions } from './format'
 import type { WalletTokenRecord, HistoryResponse, GasPriceDictResponse } from './type'
 import type { FungibleTokenAPI, HistoryAPI, GasOptionAPI } from '../types'
+import { getAllEVMNativeAssets } from '../helpers'
 
 const DEBANK_API = 'https://api.debank.com'
 const DEBANK_OPEN_API = 'https://openapi.debank.com'
@@ -73,6 +74,9 @@ export class DeBankAPI
             }),
         )
         const result = (await response.json()) as WalletTokenRecord[] | undefined
+        if (!result?.length) {
+            return createPageable(getAllEVMNativeAssets(), createIndicator(options?.indicator))
+        }
         try {
             return createPageable(
                 formatAssets(

packages/web3-providers/src/helpers.ts

@@ -1,4 +1,5 @@
 import urlcat from 'urlcat'
+import { createNativeToken, NETWORK_DESCRIPTORS } from '@masknet/web3-shared-evm'
 
 export function isProxyENV() {
     try {
@@ -18,3 +19,10 @@ const CORS_PROXY = 'https://cors.r2d2.to'
 export function courier(url: string) {
     return urlcat(`${CORS_PROXY}?:url`, { url })
 }
+
+export function getAllEVMNativeAssets() {
+    return NETWORK_DESCRIPTORS.filter((x) => x.isMainnet).map((x) => ({
+        ...createNativeToken(x.chainId),
+        balance: '0',
+    }))
+}

packages/web3-providers/src/zerion/index.ts

@@ -14,6 +14,7 @@ import type {
 } from './type'
 import { formatAssets, formatTransactions } from './format'
 import type { FungibleTokenAPI, HistoryAPI } from '../types'
+import { getAllEVMNativeAssets } from '../helpers'
 
 const ZERION_API = 'wss://api-v4.zerion.io'
 // cspell:disable-next-line
@@ -130,6 +131,7 @@ export class ZerionAPI
             result = [...result, ...assets.flat()]
         }
 
+        if (!result.length) return createPageable(getAllEVMNativeAssets(), createIndicator(options?.indicator))
         return createPageable(result, createIndicator(options?.indicator))
     }