fix: nft related issues (#12213)

* fix: mf-6697 report nft

* fix: mf-6695 switch chain in sidebar

* fix: mf-6696 load erc1155

* fix: tag image

* fix: mf-6706 mf-6699 nftscan supported chains

* fix: mf-6702 collectible plugin supports base chain

* fix: mf-6701 magiceden offers

* fix mf-6708 adjust collectible card style

* fix: mf-6707 portal container

Author: swkatmask

packages/mask/content-script/site-adaptors/twitter.com/injection/NFT/NFTAvatarEditProfile.tsx

@@ -1,18 +1,18 @@
-import { useEffect } from 'react'
+import Services from '#services'
 import { MutationObserverWatcher } from '@dimensiondev/holoflows-kit'
-import { makeStyles } from '@masknet/theme'
 import { NFTAvatarButton } from '@masknet/plugin-avatar'
 import { ConnectPersonaBoundary } from '@masknet/shared'
-import { PluginID, CrossIsolationMessages, currentPersonaIdentifier } from '@masknet/shared-base'
+import { CrossIsolationMessages, currentPersonaIdentifier, PluginID } from '@masknet/shared-base'
 import { useValueRef } from '@masknet/shared-base-ui'
-import { startWatch } from '../../../../utils/startWatch.js'
+import { makeStyles } from '@masknet/theme'
+import { useEffect } from 'react'
+import { usePersonasFromDB } from '../../../../../shared-ui/hooks/usePersonasFromDB.js'
+import { useLastRecognizedIdentity, useThemeSettings } from '../../../../components/DataSource/useActivatedUI.js'
 import { attachReactTreeWithContainer } from '../../../../utils/shadow-root/renderInShadowRoot.js'
+import { startWatch } from '../../../../utils/startWatch.js'
+import { ButtonStyle, type ButtonProps } from '../../constant.js'
 import { searchEditProfileSelector } from '../../utils/selector.js'
 import { injectOpenNFTAvatarEditProfileButtonAtEditProfileDialog } from './NFTAvatarEditProfileDialog.js'
-import { ButtonStyle, type ButtonProps } from '../../constant.js'
-import { useLastRecognizedIdentity, useThemeSettings } from '../../../../components/DataSource/useActivatedUI.js'
-import { usePersonasFromDB } from '../../../../../shared-ui/hooks/usePersonasFromDB.js'
-import Services from '#services'
 
 export function injectOpenNFTAvatarEditProfileButton(signal: AbortSignal) {
     injectOpenNFTAvatarEditProfileButtonAtProfilePage(signal)

packages/mask/dashboard/components/OutletPortal.tsx

@@ -3,11 +3,11 @@ import { memo } from 'react'
 import { useOutletContext } from 'react-router-dom'
 
 export interface PortalContainerProps {
-    portalContainerRef: React.RefObject<HTMLDivElement | null>
+    portalContainer: HTMLDivElement | null
 }
 
 interface OutletPortalProps extends Omit<PortalProps, 'container'> {}
 export const OutletPortal = memo<OutletPortalProps>(function OutletPortal(props) {
-    const { portalContainerRef } = useOutletContext<PortalContainerProps>()
-    return <Portal container={() => portalContainerRef.current} {...props}></Portal>
+    const { portalContainer } = useOutletContext<PortalContainerProps>()
+    return <Portal container={portalContainer} {...props}></Portal>
 })

packages/mask/dashboard/pages/SetupPersona/Backup/index.tsx

@@ -2,7 +2,7 @@ import { Trans } from '@lingui/react/macro'
 import { MaskTabList, makeStyles } from '@masknet/theme'
 import { TabContext } from '@mui/lab'
 import { Box, Tab, Typography } from '@mui/material'
-import { memo, useRef } from 'react'
+import { memo, useState } from 'react'
 import { Outlet } from 'react-router-dom'
 import { StorageType } from '../types.js'
 import { usePathTab, type TabPathTuple } from '@masknet/shared'
@@ -59,7 +59,7 @@ export const Component = memo(function Backup() {
 
     const [tab, handleTabChange] = usePathTab(tuples)
 
-    const portalContainerRef = useRef<HTMLDivElement>(null)
+    const [portalContainer, setPortalContainer] = useState<HTMLDivElement | null>(null)
 
     return (
         <Box>
@@ -90,10 +90,10 @@ export const Component = memo(function Backup() {
                     </TabContext>
                 </div>
                 <div className={classes.panelContainer}>
-                    <Outlet context={{ portalContainerRef }} />
+                    <Outlet context={{ portalContainer }} />
                 </div>
             </Box>
-            <Box className={classes.exclaveActions} ref={portalContainerRef}></Box>
+            <div className={classes.exclaveActions} ref={setPortalContainer} />
         </Box>
     )
 })

packages/mask/dashboard/pages/SetupPersona/Recovery/index.tsx

@@ -4,7 +4,7 @@ import { DashboardRoutes } from '@masknet/shared-base'
 import { MaskTabList, makeStyles } from '@masknet/theme'
 import { TabContext } from '@mui/lab'
 import { Box, Tab, Typography } from '@mui/material'
-import { memo, useRef } from 'react'
+import { memo, useState } from 'react'
 import { Link, Outlet } from 'react-router-dom'
 import { RecoveryMethod } from './types.js'
 
@@ -77,7 +77,7 @@ export const Component = memo(function Recovery() {
 
     const [tab, handleTabChange] = usePathTab(tuples)
 
-    const portalContainerRef = useRef<HTMLDivElement>(null)
+    const [portalContainer, setPortalContainer] = useState<HTMLDivElement | null>(null)
 
     return (
         <Box className={classes.container}>
@@ -122,10 +122,10 @@ export const Component = memo(function Recovery() {
                     </TabContext>
                 </div>
                 <div className={classes.panelContainer}>
-                    <Outlet context={{ portalContainerRef }} />
+                    <Outlet context={{ portalContainer }} />
                 </div>
             </Box>
-            <Box className={classes.exclaveActions} ref={portalContainerRef}></Box>
+            <div className={classes.exclaveActions} ref={setPortalContainer} />
         </Box>
     )
 })

packages/mask/popups/components/TokenPicker/index.tsx

@@ -201,7 +201,6 @@ export const TokenPicker = memo(function TokenPicker({
                     networks={filteredNetworks}
                     pluginID={NetworkPluginID.PLUGIN_EVM}
                     chainId={sidebarChainId}
-                    hideAllButton
                     onChainChange={handleChainChange}
                 />
             :   null}

packages/mask/popups/pages/Wallet/AddToken/index.tsx

@@ -163,7 +163,6 @@ export const Component = memo(function AddToken() {
             <div className={classes.content}>
                 <SelectNetworkSidebar
                     className={classes.sidebar}
-                    hideAllButton
                     chainId={chainId}
                     onChainChange={(chainId) => setChainId(chainId ?? ChainId.Mainnet)}
                     networks={allNetworks}

packages/mask/popups/pages/Wallet/components/WalletAssets/WalletCollections.tsx

@@ -116,7 +116,7 @@ export const WalletCollections = memo(function WalletCollections({ onAddToken, s
             ref={ref}
             classes={{ grid: classes.grid }}
             gridProps={gridProps}
-            disableSidebar
+            disableSidebar={false}
             disableWindowScroll
             scrollElementRef={scrollTargetRef}
             emptyText={collectiblesEmptyText}

packages/plugins/Collectible/src/SiteAdaptor/Card/CollectibleCard.tsx

@@ -17,6 +17,7 @@ const useStyles = makeStyles()((theme) => {
         overContent: {
             backgroundColor: theme.palette.maskColor.white,
             boxSizing: 'border-box',
+            paddingBottom: '16px !important',
         },
     }
 })

packages/plugins/Collectible/src/SiteAdaptor/Card/tabs/AboutTab.tsx

@@ -9,17 +9,14 @@ import { FigureCard } from '../../Shared/FigureCard.js'
 import { PriceCard } from '../../Shared/PriceCard.js'
 import { CollectibleCard } from '../CollectibleCard.js'
 
-const useStyles = makeStyles<{ hidePriceCard: boolean }>()((theme, { hidePriceCard }) => ({
+const useStyles = makeStyles()((theme) => ({
     body: {
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
+        gap: theme.spacing(2),
         minHeight: 300,
     },
-    basic: {
-        width: '100%',
-        marginBottom: hidePriceCard ? 0 : 16,
-    },
 }))
 
 const resolveTopListing = (orders: Array<NonFungibleTokenOrder<Web3Helper.ChainIdAll, Web3Helper.SchemaTypeAll>>) => {
@@ -40,10 +37,9 @@ interface AboutTabProps {
 
 export function AboutTab(props: AboutTabProps) {
     const { asset, isLoading } = props
-    const { orders, offers, sourceType } = Context.useContainer()
+    const { offers } = Context.useContainer()
     const topListing = useMemo(() => resolveTopListing(offers), [offers])
-    const hidePriceCard = !topListing && Boolean(orders.error) && !sourceType
-    const { classes } = useStyles({ hidePriceCard })
+    const { classes } = useStyles()
 
     if (isLoading || !asset)
         return (
@@ -56,9 +52,7 @@ export function AboutTab(props: AboutTabProps) {
     return (
         <CollectibleCard>
             <div className={classes.body}>
-                <div className={classes.basic}>
-                    <FigureCard hideSubTitle asset={asset} />
-                </div>
+                <FigureCard hideSubTitle asset={asset} />
                 <PriceCard topListing={topListing} />
             </div>
         </CollectibleCard>

packages/plugins/Collectible/src/SiteAdaptor/index.tsx

@@ -1,3 +1,4 @@
+import { Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
 import { usePluginWrapper, usePostInfoDetails, type Plugin } from '@masknet/plugin-infra/content-script'
 import { CollectionList, UserAssetsProvider } from '@masknet/shared'
@@ -6,7 +7,9 @@ import { makeStyles } from '@masknet/theme'
 import { extractTextFromTypedMessage } from '@masknet/typed-message'
 import type { Web3Helper } from '@masknet/web3-helpers'
 import { Web3ContextProvider } from '@masknet/web3-hooks-base'
+import { NFTSCAN_CHAIN_IDS } from '@masknet/web3-providers'
 import { SearchResultType } from '@masknet/web3-shared-base'
+import type { ChainId } from '@masknet/web3-shared-evm'
 import { Telemetry } from '@masknet/web3-telemetry'
 import { EventID, EventType } from '@masknet/web3-telemetry/types'
 import { Box } from '@mui/material'
@@ -16,7 +19,6 @@ import { PLUGIN_ID, PLUGIN_NAME } from '../constants.js'
 import { getPayloadFromURLs } from '../helpers/index.js'
 import { DialogInspector } from './DialogInspector.js'
 import { PostInspector } from './PostInspector.js'
-import { Trans } from '@lingui/react/macro'
 
 function useInspectCollectible(pluginID?: NetworkPluginID) {
     return useCallback(
@@ -89,13 +91,19 @@ const site: Plugin.SiteAdaptor.Definition = {
     GlobalInjection() {
         return <DialogInspector />
     },
-    PostInspector() {
+    PostInspector: function CollectiblePostInspector() {
         const links = usePostInfoDetails.mentionedLinks()
         const payload = getPayloadFromURLs(links)
-        usePluginWrapper(!!payload)
-        return payload ? <PostInspector payload={payload} /> : null
+        console.log({ payload, links }, ...links)
+        const isSupported =
+            payload?.chainId ?
+                NFTSCAN_CHAIN_IDS.includes(payload.chainId as ChainId) ||
+                payload.pluginID === NetworkPluginID.PLUGIN_SOLANA
+            :   false
+        usePluginWrapper(isSupported)
+        return isSupported && payload ? <PostInspector payload={payload} /> : null
     },
-    DecryptedInspector(props) {
+    DecryptedInspector: function CollectibleDecryptedInspector(props) {
         const links = parseURLs(extractTextFromTypedMessage(props.message, { linkAsText: true }).unwrapOr(''))
         const payload = getPayloadFromURLs(links)
         usePluginWrapper(!!payload)