refactor: move debugger settings

packages/mask/shared/kv-storage.ts

@@ -21,4 +21,7 @@ export const InMemoryStorages = {
 }
 export const PersistentStorages = {
     Plugin: createPersistentKVStorage('plugin', {}),
+    Settings: createPersistentKVStorage('settings', {
+        debugging: false,
+    }),
 }

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

@@ -2,23 +2,22 @@ import { forwardRef, useImperativeHandle, useMemo, useRef, useState, startTransi
 import { Typography, Chip, Button } from '@mui/material'
 import { LoadingButton } from '@mui/lab'
 import type { SerializableTypedMessages, TypedMessage } from '@masknet/typed-message'
-import { useValueRef } from '@masknet/shared-base-ui'
 import { makeStyles } from '@masknet/theme'
 import { ImagePayloadIcon } from '@masknet/icons'
 import { Send } from '@mui/icons-material'
 import { PluginEntryRender, PluginEntryRenderRef } from './PluginEntryRender'
 import { TypedMessageEditor, TypedMessageEditorRef } from './TypedMessageEditor'
 import { CharLimitIndicator } from './CharLimitIndicator'
 import { useI18N } from '../../utils'
-import { Flags } from '../../../shared'
-import { debugModeSetting } from '../../settings/settings'
+import { Flags, PersistentStorages } from '../../../shared'
 import { ClickableChip } from '../shared/SelectRecipients/ClickableChip'
 import { SelectRecipientsUI } from '../shared/SelectRecipients/SelectRecipients'
 import type { Profile } from '../../database'
 import { CompositionContext } from '@masknet/plugin-infra'
 import { DebugMetadataInspector } from '../shared/DebugMetadataInspector'
 import { Trans } from 'react-i18next'
 import type { EncryptTargetE2E, EncryptTargetPublic } from '@masknet/encryption'
+import { useSubscription } from 'use-subscription'
 
 const useStyles = makeStyles()({
     root: {
@@ -289,7 +288,7 @@ function useEncryptionEncode(props: Pick<CompositionProps, 'supportImageEncoding
 }
 
 function useMetadataDebugger(context: CompositionContext, Editor: TypedMessageEditorRef | null) {
-    const isDebug = useValueRef(debugModeSetting)
+    const isDebug = useSubscription(PersistentStorages.Settings.storage.debugging.subscription)
     const [__MetadataDebuggerMeta, __configureMetadataDebugger] = useState<TypedMessage['meta'] | null>(null)
 
     const __syncMetadataDebugger = () => {

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

@@ -6,12 +6,12 @@ import { PostIVIdentifier, ProfileIdentifier } from '@masknet/shared-base'
 import type { TypedMessageTuple } from '@masknet/typed-message'
 import type { Profile } from '../../database'
 import { useCurrentIdentity, useFriendsList } from '../DataSource/useActivatedUI'
-import { useValueRef } from '@masknet/shared-base-ui'
-import { debugModeSetting } from '../../settings/settings'
 import { usePostInfoDetails } from '../DataSource/usePostInfo'
 import { createInjectHooksRenderer, useActivatedPluginsSNSAdaptor } from '@masknet/plugin-infra'
 import { PossiblePluginSuggestionPostInspector } from './DisabledPluginSuggestion'
 import { MaskPostExtraPluginWrapper } from '../../plugins/MaskPluginWrapper'
+import { useSubscription } from 'use-subscription'
+import { PersistentStorages } from '../../../shared'
 
 const PluginHooksRenderer = createInjectHooksRenderer(
     useActivatedPluginsSNSAdaptor.visibility.useNotMinimalMode,
@@ -32,7 +32,7 @@ export function PostInspector(props: PostInspectorProps) {
     const version = usePostInfoDetails.version()
     const iv = usePostInfoDetails.iv()
     const postImages = usePostInfoDetails.postMetadataImages()
-    const isDebugging = useValueRef(debugModeSetting)
+    const isDebugging = useSubscription(PersistentStorages.Settings.storage.debugging.subscription)
     const whoAmI = useCurrentIdentity()
     const friends = useFriendsList()
     const [alreadySelectedPreviously, setAlreadySelectedPreviously] = useState<Profile[]>([])

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

@@ -29,7 +29,6 @@ import { makeStyles } from '@masknet/theme'
 import BigNumber from 'bignumber.js'
 import formatDateTime from 'date-fns/format'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
-import { debugModeSetting } from '../../../settings/settings'
 import { useI18N } from '../../../utils'
 import { MSG_DELIMITER } from '../constants'
 import { useAvailabilityComputed } from './hooks/useAvailabilityComputed'
@@ -38,6 +37,8 @@ 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 { PersistentStorages } from '../../../../shared'
 
 const useStyles = makeStyles()((theme) => {
     const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`
@@ -140,6 +141,7 @@ export function PoolInList(props: PoolInListProps) {
     const { classes } = useStyles()
     const { NATIVE_TOKEN_ADDRESS } = useTokenConstants()
 
+    const isDebugging = useSubscription(PersistentStorages.Settings.storage.debugging.subscription)
     // #region Fetch tokens detailed
     const { value: _tokenDetailed } = useFungibleTokenDetailed(
         EthereumTokenType.ERC20,
@@ -253,7 +255,7 @@ export function PoolInList(props: PoolInListProps) {
                                     date: formatDateTime(pool.end_time, 'yyyy-MM-dd HH:mm:ss'),
                                 })}
                             </Typography>
-                            {debugModeSetting.value ? (
+                            {isDebugging ? (
                                 <Typography className={classes.date} variant="body2" color="textSecondary">
                                     {t('plugin_ito_password', {
                                         password: pool.password === '' ? 'no password' : pool.password,

packages/mask/src/settings/listener.ts

@@ -1,10 +1,4 @@
-import {
-    appearanceSettings,
-    pluginIDSettings,
-    languageSettings,
-    debugModeSetting,
-    currentPersonaIdentifier,
-} from './settings'
+import { appearanceSettings, pluginIDSettings, languageSettings, currentPersonaIdentifier } from './settings'
 import type { MaskSettingsEvents } from '@masknet/shared-base'
 import {
     currentAccountSettings,
@@ -24,7 +18,6 @@ export function ToBeListened(): ToBeListedSettings {
         appearanceSettings,
         pluginIDSettings,
         languageSettings,
-        debugModeSetting,
         currentChainIdSettings,
         currentTokenPricesSettings,
         currentDataProviderSettings,

packages/mask/src/settings/settings.ts

@@ -6,7 +6,6 @@ import { updateLanguage } from '@masknet/shared-base'
 import { PLUGIN_ID } from '../plugins/EVM/constants'
 import { isEqual } from 'lodash-unified'
 
-export const debugModeSetting = createGlobalSettings('debugMode', false)
 export const appearanceSettings = createGlobalSettings<Appearance>('appearance', Appearance.default)
 export const languageSettings = createGlobalSettings<LanguageOptions>('language', LanguageOptions.__auto__)
 languageSettings.addListener(updateLanguage)

packages/shared-base/src/Messages/Mask.ts

@@ -15,7 +15,6 @@ import type { RelationFavor } from '../Persona/type'
 export interface MaskSettingsEvents {
     appearanceSettings: Appearance
     languageSettings: LanguageOptions
-    debugModeSetting: boolean
     pluginIDSettings: string
     currentChainIdSettings: number
     currentTokenPricesSettings: CryptoPrice