refactor: replace use-subscription

packages/dashboard/package.json

@@ -53,7 +53,6 @@
     "react-use": "^17.3.2",
     "unstated-next": "^1.1.0",
     "urlcat": "^2.0.4",
-    "use-subscription": "1.6.0",
     "uuid": "^8.3.2",
     "wallet.ts": "^1.0.1",
     "web3-core-helpers": "1.7.3",
@@ -68,7 +67,6 @@
     "@storybook/builder-webpack5": "^6.4.22",
     "@storybook/manager-webpack5": "^6.4.22",
     "@storybook/react": "^6.4.22",
-    "@types/use-subscription": "^1.0.0",
     "@types/uuid": "^8.3.4",
     "babel-loader": "^8.2.5",
     "webpack": "^5.72.0"

packages/dashboard/src/web3/context.ts

@@ -1,4 +1,4 @@
-import type { Subscription } from 'use-subscription'
+import type { Subscription } from '@masknet/shared-base'
 import {
     ChainId,
     ERC1155TokenDetailed,

packages/mask/package.json

@@ -62,7 +62,6 @@
     "@types/react-window": "^1.8.4",
     "@types/remarkable": "^2.0.3",
     "@types/socket.io-client": "^1.4.36",
-    "@types/use-subscription": "^1.0.0",
     "@types/uuid": "^8.3.4",
     "@uniswap/sdk-core": "^3.0.1",
     "@uniswap/v2-sdk": "3.0.0-alpha.2",
@@ -97,9 +96,9 @@
     "millify": "^4.0.0",
     "next-tick": "^1.0.0",
     "opensea-js": "^1.2.7",
-    "pure-react-carousel": "^1.28.1",
     "promievent": "^0.1.4",
     "protobufjs": "^6.11.2",
+    "pure-react-carousel": "^1.28.1",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-draggable": "^4.4.4",
@@ -120,7 +119,7 @@
     "stream-http": "^2.8.3",
     "unstated-next": "^1.1.0",
     "urlcat": "^2.0.4",
-    "use-subscription": "1.6.0",
+    "use-sync-external-store": "^1.1.0",
     "uuid": "^8.3.2",
     "wallet.ts": "^1.0.1",
     "web-ext-types": "^3.1.0",
@@ -138,6 +137,7 @@
     "@nice-labs/emit-file-webpack-plugin": "^1.1.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
     "@types/color": "^3.0.3",
+    "@types/use-sync-external-store": "^0.0.3",
     "binaryen": "^107.0.0",
     "copy-webpack-plugin": "^10.2.4",
     "html-webpack-plugin": "^5.5.0",

packages/mask/shared-ui/TypedMessageRender/context.tsx

@@ -8,7 +8,7 @@ import {
     TransformationContextProvider,
 } from '@masknet/typed-message/dom'
 import { TypedMessageRenderRegistry } from './registry'
-import { useSubscription } from 'use-subscription'
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'
 import { useMemo } from 'react'
 import { Container, Link } from './Components/Text'
 import { TypedMessageTransformers } from './transformer'
@@ -20,8 +20,18 @@ export interface TypedMessageRenderContextProps extends React.PropsWithChildren<
 }
 
 export function TypedMessageRenderContext(props: TypedMessageRenderContextProps) {
-    const registry = useSubscription(TypedMessageRenderRegistry.subscription)
-    const transformerFunction = useSubscription(TypedMessageTransformers.subscription)
+    const registry = useSyncExternalStoreWithSelector(
+        TypedMessageRenderRegistry.subscription.subscribe,
+        TypedMessageRenderRegistry.subscription.getCurrentValue,
+        TypedMessageRenderRegistry.subscription.getCurrentValue,
+        (s) => s,
+    )
+    const transformerFunction = useSyncExternalStoreWithSelector(
+        TypedMessageTransformers.subscription.subscribe,
+        TypedMessageTransformers.subscription.getCurrentValue,
+        TypedMessageTransformers.subscription.getCurrentValue,
+        (s) => s,
+    )
     const Provider = useMemo((): RenderFragmentsContextType => {
         return { Container, Link, Metadata: props.metadataRender, ...props.renderFragments }
     }, [props.metadataRender, props.renderFragments])

packages/mask/src/components/CompositionDialog/CompositionUI.tsx

@@ -13,7 +13,7 @@ import { ProfileInformation, EncryptionTargetType } from '@masknet/shared-base'
 import { CompositionContext } from '@masknet/plugin-infra/content-script'
 import { DebugMetadataInspector } from '../shared/DebugMetadataInspector'
 import type { EncryptTargetE2E, EncryptTargetPublic } from '@masknet/encryption'
-import { useSubscription } from 'use-subscription'
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'
 import { SelectRecipientsUI } from '../shared/SelectRecipients/SelectRecipients'
 import { EncryptionTargetSelector } from './EncryptionTargetSelector'
 import { EncryptionMethodSelector, EncryptionMethodType } from './EncryptionMethodSelector'
@@ -295,7 +295,12 @@ function useEncryptionEncode(props: Pick<CompositionProps, 'supportImageEncoding
 }
 
 function useMetadataDebugger(context: CompositionContext, Editor: TypedMessageEditorRef | null) {
-    const isDebug = useSubscription(PersistentStorages.Settings.storage.debugging.subscription)
+    const isDebug = useSyncExternalStoreWithSelector(
+        PersistentStorages.Settings.storage.debugging.subscription.subscribe,
+        PersistentStorages.Settings.storage.debugging.subscription.getCurrentValue,
+        PersistentStorages.Settings.storage.debugging.subscription.getCurrentValue,
+        (s) => s,
+    )
     const [__MetadataDebuggerMeta, __configureMetadataDebugger] = useState<TypedMessage['meta'] | null>(null)
 
     const __syncMetadataDebugger = () => {

packages/mask/src/components/DataSource/useActivatedUI.ts

@@ -1,8 +1,8 @@
 import { ValueRef } from '@dimensiondev/holoflows-kit'
 import { useValueRef } from '@masknet/shared-base-ui'
-import type { PersonaIdentifier, ProfileIdentifier, ProfileInformation } from '@masknet/shared-base'
+import type { PersonaIdentifier, ProfileIdentifier, ProfileInformation, Subscription } from '@masknet/shared-base'
 import { activatedSocialNetworkUI, globalUIState } from '../../social-network'
-import { Subscription, useSubscription } from 'use-subscription'
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'
 import type { IdentityResolved } from '@masknet/plugin-infra'
 import { isEqual } from 'lodash-unified'
 import { useAsync } from 'react-use'
@@ -21,7 +21,12 @@ export function useCurrentIdentity(): {
     identifier: ProfileIdentifier
     linkedPersona?: PersonaIdentifier
 } | null {
-    return useSubscription(CurrentIdentitySubscription)
+    return useSyncExternalStoreWithSelector(
+        CurrentIdentitySubscription.subscribe,
+        CurrentIdentitySubscription.getCurrentValue,
+        CurrentIdentitySubscription.getCurrentValue,
+        (s) => s,
+    )
 }
 
 export function useCurrentLinkedPersona() {

packages/mask/src/components/DataSource/useMyPersonas.ts

@@ -1,13 +1,18 @@
 import Services from '../../extension/service'
 import { MaskMessages } from '../../utils/messages'
 import { createSubscriptionFromAsyncSuspense } from '@masknet/shared-base'
-import { useSubscription } from 'use-subscription'
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'
 
 const personas = createSubscriptionFromAsyncSuspense(
     () => Services.Identity.queryOwnedPersonaInformation(true),
     MaskMessages.events.ownPersonaChanged.on,
 )
 
 export function useMyPersonas() {
-    return useSubscription(personas)
+    return useSyncExternalStoreWithSelector(
+        personas.subscribe,
+        personas.getCurrentValue,
+        personas.getCurrentValue,
+        (s) => s,
+    )
 }

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

@@ -7,7 +7,7 @@ import {
 } from '@masknet/plugin-infra/content-script'
 import { PossiblePluginSuggestionPostInspector } from './DisabledPluginSuggestion'
 import { MaskPostExtraPluginWrapper } from '../../plugins/MaskPluginWrapper'
-import { useSubscription } from 'use-subscription'
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'
 import { PersistentStorages } from '../../../shared'
 
 const PluginHooksRenderer = createInjectHooksRenderer(
@@ -25,7 +25,12 @@ export function PostInspector(props: PostInspectorProps) {
     const postBy = usePostInfoDetails.author()
     const hasEncryptedPost = usePostInfoDetails.hasMaskPayload()
     const postImages = usePostInfoDetails.postMetadataImages()
-    const isDebugging = useSubscription(PersistentStorages.Settings.storage.debugging.subscription)
+    const isDebugging = useSyncExternalStoreWithSelector(
+        PersistentStorages.Settings.storage.debugging.subscription.subscribe,
+        PersistentStorages.Settings.storage.debugging.subscription.getCurrentValue,
+        PersistentStorages.Settings.storage.debugging.subscription.getCurrentValue,
+        (s) => s,
+    )
     const whoAmI = useCurrentIdentity()
 
     if (hasEncryptedPost || postImages.length) {

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

@@ -37,7 +37,7 @@ import { ITO_Status, JSON_PayloadFromChain, JSON_PayloadInMask, PoolFromNetwork
 import { useDestructCallback } from './hooks/useDestructCallback'
 import { useTransactionDialog } from '../../../web3/hooks/useTransactionDialog'
 import { omit } from 'lodash-unified'
-import { useSubscription } from 'use-subscription'
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'
 import { PersistentStorages } from '../../../../shared'
 
 const useStyles = makeStyles()((theme) => {
@@ -141,7 +141,12 @@ export function PoolInList(props: PoolInListProps) {
     const { classes } = useStyles()
     const { NATIVE_TOKEN_ADDRESS } = useTokenConstants()
 
-    const isDebugging = useSubscription(PersistentStorages.Settings.storage.debugging.subscription)
+    const isDebugging = useSyncExternalStoreWithSelector(
+        PersistentStorages.Settings.storage.debugging.subscription.subscribe,
+        PersistentStorages.Settings.storage.debugging.subscription.getCurrentValue,
+        PersistentStorages.Settings.storage.debugging.subscription.getCurrentValue,
+        (s) => s,
+    )
     // #region Fetch tokens detailed
     const { value: _tokenDetailed } = useFungibleTokenDetailed(
         EthereumTokenType.ERC20,

packages/mask/src/plugins/Tips/contexts/Tip/TipTaskProvider.tsx

@@ -6,7 +6,7 @@ import {
     useNativeTokenDetailed,
 } from '@masknet/web3-shared-evm'
 import { FC, useContext, useEffect, useMemo, useState } from 'react'
-import { useSubscription } from 'use-subscription'
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'
 import { getStorage } from '../../storage'
 import { TipTask, TipType } from '../../types'
 import { TargetChainIdContext } from '../TargetChainIdContext'
@@ -28,7 +28,12 @@ export const TipTaskProvider: FC<React.PropsWithChildren<Props>> = ({ children,
     const { value: nativeTokenDetailed = null } = useNativeTokenDetailed(targetChainId)
     const [token, setToken] = useState<ContextOptions['token']>(nativeTokenDetailed)
     const [erc721TokenId, setErc721TokenId] = useState<ContextOptions['erc721TokenId']>(null)
-    const storedTokens = useSubscription(getStorage().addedTokens.subscription)
+    const storedTokens = useSyncExternalStoreWithSelector(
+        getStorage().addedTokens.subscription.subscribe,
+        getStorage().addedTokens.subscription.getCurrentValue,
+        getStorage().addedTokens.subscription.getCurrentValue,
+        (s) => s,
+    )
 
     const { value: erc721Contract } = useERC721ContractDetailed(erc721Address)
 

packages/mask/src/social-network/types.ts

@@ -8,12 +8,12 @@ import type {
     PostIdentifier,
     ProfileIdentifier,
     ProfileInformation,
+    Subscription,
 } from '@masknet/shared-base'
 import type { SerializableTypedMessages } from '@masknet/typed-message'
 import type { RenderFragmentsContextType } from '@masknet/typed-message/dom'
 import type { SharedComponentOverwrite } from '@masknet/shared'
 import type { PaletteMode, Theme } from '@mui/material'
-import type { Subscription } from 'use-subscription'
 import type { createSNSAdaptorSpecializedPostContext } from './utils/create-post-context'
 
 // Don't define values in namespaces

packages/mask/src/social-network/utils/create-post-context.ts

@@ -24,8 +24,8 @@ import {
     EMPTY_LIST,
     PostIVIdentifier,
     EnhanceableSite,
+    type Subscription,
 } from '@masknet/shared-base'
-import type { Subscription } from 'use-subscription'
 import { activatedSocialNetworkUI } from '../ui'
 import { resolveFacebookLink } from '../../social-network-adaptor/facebook.com/utils/resolveFacebookLink'
 import type { SupportedPayloadVersions } from '@masknet/encryption'

packages/mask/src/utils/theme/useClassicMaskSNSTheme.ts

@@ -2,7 +2,7 @@ import { unstable_createMuiStrictModeTheme } from '@mui/material'
 import type { Theme } from '@mui/material/styles/createTheme'
 import { useRef } from 'react'
 import { activatedSocialNetworkUI } from '../../social-network'
-import { useSubscription } from 'use-subscription'
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'
 import { MaskDarkTheme, MaskLightTheme } from './MaskTheme'
 import { useThemeLanguage } from './useThemeLanguage'
 import { createSubscriptionFromValueRef } from '@masknet/shared-base'
@@ -19,7 +19,12 @@ const defaultUseTheme = (t: Theme) => t
 export function useClassicMaskSNSTheme() {
     const provider = useRef(activatedSocialNetworkUI.customization.paletteMode?.current || staticRef).current
     const usePostTheme = useRef(activatedSocialNetworkUI.customization.useTheme || defaultUseTheme).current
-    const palette = useSubscription(provider)
+    const palette = useSyncExternalStoreWithSelector(
+        provider.subscribe,
+        provider.getCurrentValue,
+        provider.getCurrentValue,
+        (s) => s,
+    )
     const baseTheme = palette === 'dark' ? MaskDarkTheme : MaskLightTheme
 
     // TODO: support RTL?

packages/mask/src/web3/context.ts

@@ -1,5 +1,4 @@
 import { noop } from 'lodash-unified'
-import type { Subscription } from 'use-subscription'
 import {
     ERC20TokenDetailed,
     ERC721TokenDetailed,
@@ -15,7 +14,7 @@ import {
     createContract,
     isSameAddress,
 } from '@masknet/web3-shared-evm'
-import { isPopupPage } from '@masknet/shared-base'
+import { isPopupPage, type Subscription } from '@masknet/shared-base'
 import { bridgedCoin98Provider, bridgedEthereumProvider } from '@masknet/injected-script'
 import {
     currentAccountSettings,

packages/plugin-infra/package.json

@@ -64,12 +64,12 @@
     "@masknet/typed-message": "workspace:*",
     "@masknet/web3-shared-base": "workspace:*",
     "@servie/events": "^3.0.0",
-    "@types/use-subscription": "^1.0.0",
+    "@types/use-sync-external-store": "^0.0.3",
     "async-call-rpc": "^6.0.2",
     "bignumber.js": "^9.0.2",
     "react-use": "^17.3.2",
     "unstated-next": "^1.1.0",
-    "use-subscription": "1.6.0"
+    "use-sync-external-store": "^1.1.0"
   },
   "peerDependencies": {
     "react-i18next": "^11.15.3"

packages/plugin-infra/src/PostContext.ts

@@ -4,13 +4,14 @@ import {
     PostIVIdentifier,
     type PostIdentifier,
     type ProfileIdentifier,
+    type Subscription,
 } from '@masknet/shared-base'
 import { useObservableValues, useValueRef } from '@masknet/shared-base-ui'
 import type { TypedMessageTuple } from '@masknet/typed-message'
 import { ValueRef, LiveSelector, DOMProxy } from '@dimensiondev/holoflows-kit'
 import type { Some } from 'ts-results'
 import { createContext, createElement, memo, useContext } from 'react'
-import { Subscription, useSubscription } from 'use-subscription'
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector'
 import type { SupportedPayloadVersions } from '@masknet/encryption'
 export interface PostContextSNSActions {
     hasPayloadLike(content: string): boolean
@@ -120,8 +121,14 @@ export const usePostInfoDetails: {
             if (k instanceof ObservableMap) return useObservableValues<any>(k)
             // eslint-disable-next-line react-hooks/rules-of-hooks
             if (k instanceof ObservableSet) return useObservableValues<any>(k)
-            // eslint-disable-next-line react-hooks/rules-of-hooks
-            if (isSubscription(k)) return useSubscription<any>(k)
+            if (isSubscription(k))
+                // eslint-disable-next-line react-hooks/rules-of-hooks
+                return useSyncExternalStoreWithSelector<any, any>(
+                    k.subscribe,
+                    k.getCurrentValue,
+                    k.getCurrentValue,
+                    (s) => s,
+                )
             return k
         }
         return _[key]

packages/plugin-infra/src/manager/dashboard.ts

@@ -1,5 +1,6 @@
 import { ALL_EVENTS } from '@servie/events'
-import { useSubscription, Subscription } from 'use-subscription'
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector'
+import type { Subscription } from '@masknet/shared-base'
 import { createManager } from './manage'
 import type { Plugin } from '../types'
 
@@ -11,11 +12,21 @@ const subscription: Subscription<Plugin.Dashboard.Definition[]> = {
 }
 
 export function useActivatedPluginsDashboard() {
-    return useSubscription(subscription)
+    return useSyncExternalStoreWithSelector(
+        subscription.subscribe,
+        subscription.getCurrentValue,
+        subscription.getCurrentValue,
+        (s) => s,
+    )
 }
 
 export function useActivatedPluginDashboard(pluginID: string) {
-    const plugins = useSubscription(subscription)
+    const plugins = useSyncExternalStoreWithSelector(
+        subscription.subscribe,
+        subscription.getCurrentValue,
+        subscription.getCurrentValue,
+        (s) => s,
+    )
     return plugins.find((x) => x.ID === pluginID)
 }