fix: use provider (#10531)

* fix: useProviderDescriptor

* fix: build error

packages/mask/shared/site-adaptors/index.ts

@@ -3,6 +3,5 @@ import './implementations/twitter.com.js'
 import './implementations/minds.com.js'
 import './implementations/instagram.com.js'
 import './implementations/mirror.xyz.js'
-import './implementations/mask.io.js'
 if (import.meta.webpackHot) import.meta.webpackHot.accept()
 // add opensea

packages/mask/src/extension/popups/modals/ConnectProvider/index.tsx

@@ -1,15 +1,15 @@
 import { memo, useCallback, useMemo } from 'react'
-import { ActionModal, type ActionModalBaseProps, useModalNavigate } from '../../components/index.js'
-import { useI18N } from '../../../../utils/i18n-next-ui.js'
+import { useAsyncFn, useMount } from 'react-use'
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
 import { Box, Button, Typography } from '@mui/material'
+import { delay, timeout } from '@masknet/kit'
 import { makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
 import { useNetworkContext, useProviderDescriptor, useWeb3State } from '@masknet/web3-hooks-base'
 import { PopupModalRoutes, type NetworkPluginID, PopupRoutes } from '@masknet/shared-base'
 import { Web3 } from '@masknet/web3-providers'
-import { delay, timeout } from '@masknet/kit'
-import { useAsyncFn, useMount } from 'react-use'
 import { ChainId, ProviderType } from '@masknet/web3-shared-evm'
+import { ActionModal, type ActionModalBaseProps, useModalNavigate } from '../../components/index.js'
+import { useI18N } from '../../../../utils/i18n-next-ui.js'
 
 interface StyleProps {
     loading: boolean
@@ -87,8 +87,9 @@ export const ConnectProviderModal = memo<ActionModalBaseProps>(function ConnectP
     const provider = useProviderDescriptor<void, NetworkPluginID.PLUGIN_EVM>(pluginID, providerType)
 
     const providerExist = useMemo(() => {
+        if (!provider?.type) return false
         return Provider?.isReady(provider.type)
-    }, [provider.type, Provider])
+    }, [provider?.type, Provider])
 
     const handleClose = useCallback(() => {
         navigate(PopupRoutes.Personas, { replace: true })
@@ -99,6 +100,7 @@ export const ConnectProviderModal = memo<ActionModalBaseProps>(function ConnectP
 
         const providerType = params.get('providerType') as ProviderType | undefined
         if (!providerType) return
+
         try {
             const connect = async () => {
                 // wait for web3 state init
@@ -161,9 +163,11 @@ export const ConnectProviderModal = memo<ActionModalBaseProps>(function ConnectP
                       )}
             </Typography>
             <Box mt={4} p={1.5} display="flex" justifyContent="center" flexDirection="column" alignItems="center">
-                <Box className={classes.icon}>
-                    <img src={provider.icon} style={{ width: 32, height: 32 }} />
-                </Box>
+                {provider?.icon ? (
+                    <Box className={classes.icon}>
+                        <img src={provider.icon} style={{ width: 32, height: 32 }} />
+                    </Box>
+                ) : null}
                 {isTimeout ? (
                     <Button variant="roundedContained" size="small" sx={{ width: 84, mt: 1.5 }} onClick={handleConnect}>
                         {t('retry')}

packages/plugins/SmartPay/src/SiteAdaptor/components/Deploy.tsx

@@ -140,7 +140,7 @@ export function Deploy({ open }: { open: boolean }) {
 
     const { signer } = SmartPayContext.useContainer()
     const { signWallet, signPersona } = signer || {}
-    const maskProviderDescriptor = useProviderDescriptor(NetworkPluginID.PLUGIN_EVM, ProviderType.MaskWallet)
+    const providerDescriptor = useProviderDescriptor(NetworkPluginID.PLUGIN_EVM, ProviderType.MaskWallet)
     const polygonDescriptor = useNetworkDescriptor(NetworkPluginID.PLUGIN_EVM, chainId)
     const currentVisitingProfile = useLastRecognizedIdentity()
 
@@ -311,9 +311,9 @@ export function Deploy({ open }: { open: boolean }) {
                     <Box className={classes.walletStatus}>
                         <WalletDescription
                             pending={false}
-                            providerIcon={maskProviderDescriptor?.icon}
+                            providerIcon={providerDescriptor?.icon}
                             networkIcon={polygonDescriptor?.icon}
-                            iconFilterColor={maskProviderDescriptor?.iconFilterColor}
+                            iconFilterColor={providerDescriptor?.iconFilterColor}
                             name={signWallet?.name}
                             formattedAddress={
                                 signWallet?.address ? formatEthereumAddress(signWallet.address, 4) : undefined

packages/shared/src/UI/components/WalletStatusBar/WalletMenuItem.tsx

@@ -1,7 +1,6 @@
 import { memo } from 'react'
 import { Button, ListItemIcon, MenuItem } from '@mui/material'
 import { Icons } from '@masknet/icons'
-import { useSharedI18N } from '../../../locales/index.js'
 import { resolveNextID_NetworkPluginID } from '@masknet/web3-shared-base'
 import type { NetworkPluginID, NextIDPlatform } from '@masknet/shared-base'
 import { useWalletName } from './hooks/useWalletName.js'
@@ -14,8 +13,9 @@ import {
     useWeb3Others,
 } from '@masknet/web3-hooks-base'
 import type { Web3Helper } from '@masknet/web3-helpers'
-import { WalletDescription, type WalletDescriptionProps } from './WalletDescription.js'
 import { makeStyles } from '@masknet/theme'
+import { WalletDescription, type WalletDescriptionProps } from './WalletDescription.js'
+import { useSharedI18N } from '../../../locales/index.js'
 
 const useStyles = makeStyles()((theme) => ({
     icon: {

packages/web3-hooks/base/src/useNetworkDescriptor.ts

@@ -18,5 +18,5 @@ export function useNetworkDescriptor<S extends 'all' | void = void, T extends Ne
 
     return getPluginDefine(pluginID)?.declareWeb3Networks?.find((x) =>
         [x.chainId, x.type, x.ID].includes(expectedChainIdOrNetworkTypeOrID ?? networkType ?? ''),
-    ) as Web3Helper.NetworkDescriptorScope<S, T>
+    ) as Web3Helper.NetworkDescriptorScope<S, T> | undefined
 }

packages/web3-hooks/base/src/useProviderDescriptor.ts

@@ -1,20 +1,22 @@
-import { useMemo } from 'react'
 import { getPluginDefine } from '@masknet/plugin-infra'
 import type { NetworkPluginID } from '@masknet/shared-base'
 import type { Web3Helper } from '@masknet/web3-helpers'
 import { useChainContext, useNetworkContext } from './useContext.js'
 
+/**
+ * Get built in declared provider descriptor
+ * @param expectedPluginID
+ * @param expectedProviderTypeOrID
+ * @returns
+ */
 export function useProviderDescriptor<S extends 'all' | void = void, T extends NetworkPluginID = NetworkPluginID>(
     expectedPluginID?: T,
     expectedProviderTypeOrID?: string,
-): Web3Helper.ProviderDescriptorScope<S, T> {
+): Web3Helper.ProviderDescriptorScope<S, T> | undefined {
     const { pluginID } = useNetworkContext(expectedPluginID)
     const { providerType } = useChainContext()
 
-    const typeOrId = expectedProviderTypeOrID ?? providerType ?? ''
-    return useMemo(() => {
-        return getPluginDefine(pluginID)?.declareWeb3Providers?.find((x) =>
-            [x.type, x.ID].includes(typeOrId),
-        ) as Web3Helper.ProviderDescriptorScope<S, T>
-    }, [pluginID, typeOrId])
+    return getPluginDefine(pluginID)?.declareWeb3Providers?.find((x) =>
+        [x.type, x.ID].includes(expectedProviderTypeOrID ?? providerType ?? ''),
+    ) as Web3Helper.ProviderDescriptorScope<S, T> | undefined
 }