refactor: the separated connection status

packages/dashboard/src/pages/Wallets/components/AddCollectibleDialog/index.tsx

@@ -4,6 +4,7 @@ import { Box, Button, DialogActions, DialogContent } from '@mui/material'
 import {
     EthereumTokenType,
     isSameAddress,
+    useChainId,
     useERC721ContractDetailed,
     useERC721TokenDetailedCallback,
     useWallet,
@@ -32,14 +33,15 @@ enum FormErrorType {
 
 export const AddCollectibleDialog = memo<AddCollectibleDialogProps>(({ open, onClose }) => {
     const wallet = useWallet()
+    const chainId = useChainId()
     const [address, setAddress] = useState('')
     const { value: contractDetailed, loading: contractDetailLoading } = useERC721ContractDetailed(address)
     const [tokenId, setTokenId, erc721TokenDetailedCallback] = useERC721TokenDetailedCallback(contractDetailed)
 
     const onSubmit = useCallback(async () => {
         if (contractDetailLoading || !wallet) return
 
-        const tokenInDB = await PluginServices.Wallet.getToken(EthereumTokenType.ERC721, address, tokenId)
+        const tokenInDB = await PluginServices.Wallet.getToken(chainId, EthereumTokenType.ERC721, address, tokenId)
         if (tokenInDB) throw new Error(FormErrorType.Added)
 
         const tokenDetailed = await erc721TokenDetailedCallback()

packages/dashboard/stories/components/Persona/PersonaSetup.tsx

@@ -1,6 +1,7 @@
 import { story } from '@masknet/storybook-shared'
 import { PersonaSetup as C } from '../../../src/pages/Personas/components/PersonaSetup'
 import { action } from '@storybook/addon-actions'
+import { SocialNetworkID } from '../../../../mask/shared'
 
 const { meta, of } = story(C)
 
@@ -10,7 +11,7 @@ export default meta({
 
 export const PersonaSetup = of({
     args: {
-        networkIdentifier: 'twitter.com',
+        networkIdentifier: SocialNetworkID.Twitter,
         onConnect: action('onConnect'),
     },
 })

packages/dashboard/stories/components/Persona/UnconnectedPersonaLine.tsx

@@ -1,6 +1,7 @@
 import { story } from '@masknet/storybook-shared'
 import { UnconnectedPersonaLine as C } from '../../../src/pages/Personas/components/PersonaLine'
 import { action } from '@storybook/addon-actions'
+import { SocialNetworkID } from '../../../../mask/shared'
 
 const { meta, of } = story(C)
 
@@ -10,7 +11,7 @@ export default meta({
 
 export const UnconnectedPersonaLine = of({
     args: {
-        networkIdentifier: 'twitter',
+        networkIdentifier: SocialNetworkID.Twitter,
         onConnect: action('onConnect'),
     },
 })

packages/mask/shared/index.ts

@@ -1,4 +1,5 @@
 export * from './messages'
+export * from './types'
 export * from './flags'
 export { InMemoryStorages, PersistentStorages } from './kv-storage'
 export * from './helpers/download'

packages/mask/shared/types.ts

@@ -0,0 +1,8 @@
+export enum SocialNetworkID {
+    Dashboard = 'localhost.dashboard',
+    BrowserAction = 'localhost.browser_action',
+    Twitter = 'twitter.com',
+    Facebook = 'facebook.com',
+    Minds = 'minds.com',
+    Instagram = 'instagram.com',
+}

packages/mask/src/components/InjectedComponents/CommentBox.tsx

@@ -2,7 +2,7 @@ import { makeStyles } from '@masknet/theme'
 import { InputBase, Box } from '@mui/material'
 import { useI18N } from '../../utils'
 import { activatedSocialNetworkUI } from '../../social-network'
-import { MINDS_ID } from '../../social-network-adaptor/minds.com/base'
+import { SocialNetworkID } from '../../../shared'
 
 interface StyleProps {
     snsId: string
@@ -13,7 +13,7 @@ const useStyles = makeStyles<StyleProps>()((theme, { snsId }) => ({
         flex: 1,
         fontSize: 13,
         background: '#3a3b3c',
-        width: snsId === MINDS_ID ? '96%' : '100%',
+        width: snsId === SocialNetworkID.Minds ? '96%' : '100%',
         height: 34,
         borderRadius: 20,
         padding: '2px 1em',

packages/mask/src/components/shared/InjectedDialog.tsx

@@ -20,8 +20,7 @@ import { isDashboardPage } from '@masknet/shared-base'
 import { useI18N, usePortalShadowRoot } from '../../utils'
 import { DialogDismissIconUI } from '../InjectedComponents/DialogDismissIcon'
 import { activatedSocialNetworkUI } from '../../social-network'
-import { MINDS_ID } from '../../social-network-adaptor/minds.com/base'
-import { FACEBOOK_ID } from '../../social-network-adaptor/facebook.com/base'
+import { SocialNetworkID } from '../../../shared'
 
 interface StyleProps {
     snsId: string
@@ -41,7 +40,9 @@ const useStyles = makeStyles<StyleProps>()((theme, { snsId }) => ({
         color: theme.palette.text.primary,
     },
     paper: {
-        ...(snsId === MINDS_ID || snsId === FACEBOOK_ID ? { width: 'auto', backgroundImage: 'none' } : {}),
+        ...(snsId === SocialNetworkID.Minds || snsId === SocialNetworkID.Facebook
+            ? { width: 'auto', backgroundImage: 'none' }
+            : {}),
     },
 }))
 

packages/mask/src/extension/popups/components/NetworkSelector/index.tsx

@@ -2,14 +2,12 @@ import { memo, useCallback } from 'react'
 import { Box, MenuItem, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { Flags } from '../../../../../shared'
-import { ChainId, ProviderType, useAccount } from '@masknet/web3-shared-evm'
+import { ChainId, ProviderType, useAccount, useChainId, useProviderType } from '@masknet/web3-shared-evm'
 import { getRegisteredWeb3Networks, NetworkPluginID, Web3Plugin } from '@masknet/plugin-infra'
 import {
     currentMaskWalletAccountSettings,
-    currentMaskWalletChainIdSettings,
-    currentProviderSettings,
 } from '../../../../plugins/Wallet/settings'
-import { ChainIcon, useMenu, useValueRef, WalletIcon } from '@masknet/shared'
+import { ChainIcon, useMenu, WalletIcon } from '@masknet/shared'
 import { ArrowDownRound } from '@masknet/icons'
 import { WalletRPC } from '../../../../plugins/Wallet/messages'
 
@@ -49,8 +47,8 @@ const useStyles = makeStyles()((theme) => ({
 export const NetworkSelector = memo(() => {
     const networks = getRegisteredWeb3Networks()
     const account = useAccount()
-    const currentChainId = useValueRef(currentMaskWalletChainIdSettings)
-    const currentProvider = useValueRef(currentProviderSettings)
+    const currentChainId = useChainId()
+    const currentProvider = useProviderType()
     const onChainChange = useCallback(
         async (chainId: ChainId) => {
             if (currentProvider === ProviderType.MaskWallet) {

packages/mask/src/extension/popups/pages/Personas/components/ProfileList/index.tsx

@@ -69,7 +69,7 @@ export const ProfileList = memo(() => {
 
     const definedSocialNetworks = compact(
         [...definedSocialNetworkUIs.values()].map(({ networkIdentifier }) => {
-            if (networkIdentifier === 'localhost') return null
+            if (networkIdentifier.startsWith('localhost')) return null
             return networkIdentifier
         }),
     )

packages/mask/src/extension/popups/pages/Wallet/ContractInteraction/index.tsx

@@ -15,16 +15,16 @@ import {
     useChainId,
     useERC20TokenDetailed,
     useNativeTokenDetailed,
+    useNetworkType,
 } from '@masknet/web3-shared-evm'
-import { FormattedBalance, FormattedCurrency, TokenIcon, useValueRef } from '@masknet/shared'
+import { FormattedBalance, FormattedCurrency, TokenIcon, } from '@masknet/shared'
 import { Link, Typography } from '@mui/material'
 import { useI18N } from '../../../../../utils'
 import { PopupRoutes } from '@masknet/shared-base'
 import { LoadingButton } from '@mui/lab'
 import { unreachable } from '@dimensiondev/kit'
 import { WalletRPC } from '../../../../../plugins/Wallet/messages'
 import Services from '../../../../service'
-import { currentNetworkSettings } from '../../../../../plugins/Wallet/settings'
 import BigNumber from 'bignumber.js'
 import { useNativeTokenPrice, useTokenPrice } from '../../../../../plugins/Wallet/hooks/useTokenPrice'
 import { LoadingPlaceholder } from '../../../components/LoadingPlaceholder'
@@ -136,7 +136,7 @@ const ContractInteraction = memo(() => {
     const location = useLocation()
     const history = useHistory()
     const chainId = useChainId()
-    const networkType = useValueRef(currentNetworkSettings)
+    const networkType = useNetworkType()
     const [transferError, setTransferError] = useState(false)
     const { value: request, loading: requestLoading } = useUnconfirmedRequest()
 

packages/mask/src/extension/popups/pages/Wallet/GasSetting/index.tsx

@@ -1,12 +1,10 @@
 import { memo } from 'react'
 import { makeStyles } from '@masknet/theme'
 import { Typography } from '@mui/material'
-import { useValueRef } from '@masknet/shared'
-import { NetworkType } from '@masknet/web3-shared-evm'
+import { NetworkType, useNetworkType } from '@masknet/web3-shared-evm'
 import { useI18N } from '../../../../../utils'
 import { GasSetting1559 } from './GasSetting1559'
 import { Prior1559GasSetting } from './Prior1559GasSetting'
-import { currentNetworkSettings } from '../../../../../plugins/Wallet/settings'
 
 const useStyles = makeStyles()(() => ({
     container: {
@@ -30,7 +28,7 @@ const useStyles = makeStyles()(() => ({
 const GasSetting = memo(() => {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const networkType = useValueRef(currentNetworkSettings)
+    const networkType = useNetworkType()
     return (
         <main className={classes.container}>
             <Typography className={classes.title}>{t('popups_wallet_gas_fee_settings')}</Typography>

packages/mask/src/extension/popups/pages/Wallet/ReplaceTransaction/index.tsx

@@ -12,9 +12,8 @@ import {
     getChainIdFromNetworkType,
     isEIP1559Supported,
     useNativeTokenDetailed,
+    useNetworkType,
 } from '@masknet/web3-shared-evm'
-import { useValueRef } from '@masknet/shared'
-import { currentNetworkSettings } from '../../../../../plugins/Wallet/settings'
 import BigNumber from 'bignumber.js'
 import { useI18N } from '../../../../../utils'
 import { hexToNumber, toHex } from 'web3-utils'
@@ -79,7 +78,7 @@ const ReplaceTransaction = memo(() => {
 
     const { value: nativeToken } = useNativeTokenDetailed()
     const nativeTokenPrice = useNativeTokenPrice(nativeToken?.chainId)
-    const networkType = useValueRef(currentNetworkSettings)
+    const networkType = useNetworkType()
     const is1559 = isEIP1559Supported(getChainIdFromNetworkType(networkType))
 
     const schema = useMemo(() => {

packages/mask/src/extension/popups/pages/Wallet/Transfer/index.tsx

@@ -1,11 +1,10 @@
 import { memo, useMemo, useState } from 'react'
 import { makeStyles } from '@masknet/theme'
-import { formatBalance, NetworkType, ProviderType, useWallets } from '@masknet/web3-shared-evm'
+import { formatBalance, NetworkType, ProviderType, useNetworkType, useWallets } from '@masknet/web3-shared-evm'
 import { MenuItem, Typography } from '@mui/material'
-import { FormattedBalance, TokenIcon, useMenu, useValueRef } from '@masknet/shared'
+import { FormattedBalance, TokenIcon, useMenu } from '@masknet/shared'
 import { useContainer } from 'unstated-next'
 import { WalletContext } from '../hooks/useWalletContext'
-import { currentNetworkSettings } from '../../../../../plugins/Wallet/settings'
 import { Transfer1559 } from './Transfer1559'
 import { Prior1559Transfer } from './Prior1559Transfer'
 
@@ -26,7 +25,7 @@ const useStyles = makeStyles()({
 
 const Transfer = memo(() => {
     const { classes } = useStyles()
-    const networkType = useValueRef(currentNetworkSettings)
+    const networkType = useNetworkType()
     const wallets = useWallets(ProviderType.MaskWallet)
     const { assets, currentToken } = useContainer(WalletContext)
     const [selectedAsset, setSelectedAsset] = useState(currentToken)

packages/mask/src/plugins/Collectible/apis/rarible.ts

@@ -1,4 +1,5 @@
-import { RaribleChainURL, RaribleMainnetURL } from '../constants'
+import urlcat from 'urlcat'
+import { ChainId } from '@masknet/web3-shared-evm'
 import { compact } from 'lodash-unified'
 import { OrderSide } from 'opensea-js/lib/types'
 import stringify from 'json-stable-stringify'
@@ -10,10 +11,9 @@ import {
     RaribleOfferResponse,
     RaribleProfileResponse,
 } from '../types'
+import { RaribleChainURL, RaribleMainnetURL } from '../constants'
 import { toRaribleImage } from '../helpers'
 import { resolveRaribleUserNetwork } from '../pipes'
-import { currentChainIdSettings } from '../../Wallet/settings'
-import urlcat from 'urlcat'
 
 async function fetchFromRarible<T>(root: string, subPath: string, config = {} as RequestInit) {
     const response = await (
@@ -26,7 +26,8 @@ async function fetchFromRarible<T>(root: string, subPath: string, config = {} as
     return response as T
 }
 
-export async function getProfilesFromRarible(addresses: (string | undefined)[]) {
+export async function getProfilesFromRarible(chainId: ChainId, addresses: (string | undefined)[]) {
+    if (chainId !== ChainId.Mainnet) return []
     return fetchFromRarible<RaribleProfileResponse[]>(RaribleMainnetURL, 'profiles/list', {
         method: 'POST',
         body: stringify(addresses),
@@ -36,7 +37,8 @@ export async function getProfilesFromRarible(addresses: (string | undefined)[])
     })
 }
 
-export async function getNFTItem(tokenAddress: string, tokenId: string) {
+export async function getNFTItem(chainId: ChainId, tokenAddress: string, tokenId: string) {
+    if (chainId !== ChainId.Mainnet) return []
     const assetResponse = await fetchFromRarible<RaribleNFTItemMapResponse>(
         RaribleChainURL,
         urlcat('/v0.1/nft/items/:tokenAddress::tokenId', {
@@ -54,7 +56,8 @@ export async function getNFTItem(tokenAddress: string, tokenId: string) {
     return assetResponse
 }
 
-export async function getOffersFromRarible(tokenAddress: string, tokenId: string) {
+export async function getOffersFromRarible(chainId: ChainId, tokenAddress: string, tokenId: string) {
+    if (chainId !== ChainId.Mainnet) return []
     const orders = await fetchFromRarible<RaribleOfferResponse[]>(
         RaribleMainnetURL,
         `items/${tokenAddress}:${tokenId}/offers`,
@@ -67,7 +70,6 @@ export async function getOffersFromRarible(tokenAddress: string, tokenId: string
         },
     )
     const profiles = await getProfilesFromRarible(orders.map((item) => item.maker))
-    const chainId = currentChainIdSettings.value
     return orders.map((order) => {
         const ownerInfo = profiles.find((owner) => owner.id === order.maker)
         return {
@@ -85,11 +87,14 @@ export async function getOffersFromRarible(tokenAddress: string, tokenId: string
     })
 }
 
-export async function getListingsFromRarible(tokenAddress: string, tokenId: string) {
+export async function getListingsFromRarible(chainId: ChainId, tokenAddress: string, tokenId: string) {
+    if (chainId !== ChainId.Mainnet) return []
     const assets = await fetchFromRarible<Ownership[]>(RaribleMainnetURL, `items/${tokenAddress}:${tokenId}/ownerships`)
     const listings = assets.filter((x) => x.selling)
-    const profiles = await getProfilesFromRarible(listings.map((x) => x.owner))
-    const chainId = currentChainIdSettings.value
+    const profiles = await getProfilesFromRarible(
+        chainId,
+        listings.map((x) => x.owner),
+    )
     return listings.map((asset) => {
         const ownerInfo = profiles.find((owner) => owner.id === asset.owner)
         return {
@@ -107,19 +112,20 @@ export async function getListingsFromRarible(tokenAddress: string, tokenId: stri
     })
 }
 
-export async function getOrderFromRarible(tokenAddress: string, tokenId: string, side: OrderSide) {
+export async function getOrderFromRarible(chainId: ChainId, tokenAddress: string, tokenId: string, side: OrderSide) {
+    if (chainId !== ChainId.Mainnet) return []
     switch (side) {
         case OrderSide.Buy:
-            return getOffersFromRarible(tokenAddress, tokenId)
+            return getOffersFromRarible(chainId, tokenAddress, tokenId)
         case OrderSide.Sell:
-            return getListingsFromRarible(tokenAddress, tokenId)
+            return getListingsFromRarible(chainId, tokenAddress, tokenId)
         default:
             return []
     }
 }
 
-export async function getHistoryFromRarible(tokenAddress: string, tokenId: string) {
-    let histories = await fetchFromRarible<RaribleHistory[]>(RaribleMainnetURL, `activity`, {
+export async function getHistoryFromRarible(chainId: ChainId, tokenAddress: string, tokenId: string) {
+    const result = await fetchFromRarible<RaribleHistory[]>(RaribleMainnetURL, `activity`, {
         method: 'POST',
         body: stringify({
             // types: ['BID', 'BURN', 'BUY', 'CANCEL', 'CANCEL_BID', 'ORDER', 'MINT', 'TRANSFER', 'SALE'],
@@ -135,11 +141,9 @@ export async function getHistoryFromRarible(tokenAddress: string, tokenId: strin
         },
     })
 
-    if (histories.length) {
-        histories = histories.filter((x) => Object.values(RaribleEventType).includes(x['@type']))
-    }
-
+    const histories = result.length ? result.filter((x) => Object.values(RaribleEventType).includes(x['@type'])) : []
     const profiles = await getProfilesFromRarible(
+        chainId,
         compact([
             ...histories.map((history) => history.owner),
             ...histories.map((history) => history.buyer),

packages/mask/src/plugins/ITO/SNSAdaptor/CompositionDialog.tsx

@@ -19,16 +19,16 @@ import { ConfirmDialog } from './ConfirmDialog'
 import { WalletMessages } from '../../Wallet/messages'
 import { omit, set } from 'lodash-unified'
 import { useCompositionContext } from '../../../components/CompositionDialog/CompositionContext'
-import { MINDS_ID } from '../../../social-network-adaptor/minds.com/base'
 import { activatedSocialNetworkUI } from '../../../social-network'
+import { SocialNetworkID } from '../../../../shared'
 
 interface StyleProps {
     snsId: string
 }
 
 const useStyles = makeStyles<StyleProps>()((theme, { snsId }) => ({
     content: {
-        ...(snsId === MINDS_ID ? { minWidth: 600 } : {}),
+        ...(snsId === SocialNetworkID.Minds ? { minWidth: 600 } : {}),
         position: 'relative',
         paddingTop: 50,
     },