fix: app crash (#11324)

packages/app/src/hooks/usePostPayload.ts

@@ -1,16 +1,8 @@
-import { useEffect, useState } from 'react'
+import { useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { getPostPayload } from '../helpers/getPostPayload.js'
 
-// Custom hook to execute getPostPayload when location changes
 export function usePostPayload() {
     const location = useLocation()
-    const [payload, setPayload] = useState(getPostPayload)
-
-    useEffect(() => {
-        setPayload(getPostPayload())
-    }, [location])
-
-    // Return the getPostPayload function itself (if needed)
-    return payload
+    return useMemo(getPostPayload, [location])
 }

packages/app/src/initialization/index.ts

@@ -3,10 +3,19 @@ import '../styles/index.css'
 
 import { setupBuildInfo } from '@masknet/flags/build-info'
 import { startBackgroundWorker } from './message.js'
+import { timeout } from '@masknet/kit'
 
 async function initApp() {
     await setupBuildInfo()
-    await startBackgroundWorker()
+    const background = timeout(
+        startBackgroundWorker(),
+        3000,
+        'Background worker timed out, please check out chrome://inspect/#workers. Please refresh the page, SharedWorker has been temporarily set to non-shared for debug purpose.',
+    )
+    background.catch(() => {
+        sessionStorage.setItem('background-worker-failed', 'true')
+    })
+    await background
 
     await Promise.all([
         import(/* webpackMode: 'eager' */ './fetch-flag.js').then(({ initFetchFlags }) => initFetchFlags()),

packages/app/src/initialization/message.ts

@@ -15,7 +15,6 @@ export let postMessage: (type: string, data: unknown) => void
 const messageHandlers = new Map<string, Set<MessageHandler>>()
 
 function MessageEventReceiver(event: MessageEvent): void {
-    console.log(event.data)
     const [type, data] = event.data
     const handler = messageHandlers.get(type)
     if (!handler?.size) return
@@ -24,7 +23,7 @@ function MessageEventReceiver(event: MessageEvent): void {
 
 export function startBackgroundWorker() {
     return new Promise<void>((resolve, reject) => {
-        if (typeof SharedWorker === 'function') {
+        if (typeof SharedWorker === 'function' && !sessionStorage.getItem('background-worker-failed')) {
             const worker = new SharedWorker(new URL('../background-worker/init.ts', import.meta.url), {
                 name: 'mask',
             })
@@ -143,8 +142,8 @@ export function startBackgroundWorker() {
             resolve()
             clearTimeout(timer)
         })
-        const timer = setInterval(() => postMessage('request-ready', null), 25)
-        postMessage('request-ready', null)
+        const timer = setInterval(() => postMessage('ready-request', null), 25)
+        postMessage('ready-request', null)
     })
 }
 

packages/app/webpack.config.js

@@ -89,6 +89,7 @@ function Configuration(env, argv) {
                     loader: require.resolve('swc-loader'),
                     options: {
                         jsc: {
+                            preserveAllComments: true,
                             externalHelpers: true,
                             parser: {
                                 syntax: 'typescript',

packages/mask/popups/pages/Wallet/components/ActionGroup/index.tsx

@@ -9,7 +9,7 @@ import { memo, useCallback, useMemo } from 'react'
 import { matchPath, useLocation, useNavigate } from 'react-router-dom'
 import urlcat from 'urlcat'
 import { useMaskSharedTrans } from '../../../../../shared-ui/index.js'
-import { TRADER_WEB3_CONFIG } from '@masknet/shared'
+import { TRADER_WEB3_CONFIG } from '@masknet/plugin-trader'
 
 const useStyles = makeStyles()((theme) => {
     const isDark = theme.palette.mode === 'dark'

packages/plugins/Trader/src/SiteAdaptor/trader/Trader.tsx

@@ -4,7 +4,8 @@ import type { AsyncStateRetry } from 'react-use/lib/useAsyncRetry.js'
 import { BigNumber } from 'bignumber.js'
 import { delay } from '@masknet/kit'
 import { Box, Typography, useTheme } from '@mui/material'
-import { ConfirmModal, SelectProviderModal, SelectFungibleTokenModal, TRADER_WEB3_CONFIG } from '@masknet/shared'
+import { ConfirmModal, SelectProviderModal, SelectFungibleTokenModal } from '@masknet/shared'
+import { TRADER_WEB3_CONFIG } from '../../config.js'
 import { formatBalance, isSameAddress, isZero, minus, toFixed } from '@masknet/web3-shared-base'
 import { addGasMargin, ChainId, type EIP1559GasConfig, type GasConfig } from '@masknet/web3-shared-evm'
 import { useGasConfig } from '@masknet/web3-hooks-evm'

packages/plugins/Trader/src/base.ts

@@ -2,7 +2,7 @@ import type { Plugin } from '@masknet/plugin-infra'
 import { DEFAULT_PLUGIN_PUBLISHER, EnhanceableSite } from '@masknet/shared-base'
 import { PLUGIN_ID } from './constants/index.js'
 import { languages } from './locales/languages.js'
-import { TRADER_WEB3_CONFIG } from '@masknet/shared'
+import { TRADER_WEB3_CONFIG } from './config.js'
 
 export const base: Plugin.Shared.Definition = {
     ID: PLUGIN_ID,

packages/plugins/Trader/src/config.ts

@@ -0,0 +1,21 @@
+import { NetworkPluginID } from '@masknet/shared-base'
+import { ChainId } from '@masknet/web3-shared-evm'
+
+export const TRADER_WEB3_CONFIG = {
+    [NetworkPluginID.PLUGIN_EVM]: {
+        supportedChainIds: [
+            ChainId.Mainnet,
+            ChainId.BSC,
+            ChainId.Matic,
+            ChainId.Arbitrum,
+            ChainId.xDai,
+            ChainId.Aurora,
+            ChainId.Avalanche,
+            ChainId.Fantom,
+            ChainId.Astar,
+            ChainId.Optimism,
+        ],
+    },
+    [NetworkPluginID.PLUGIN_FLOW]: { supportedChainIds: [] },
+    [NetworkPluginID.PLUGIN_SOLANA]: { supportedChainIds: [] },
+}

packages/plugins/Trader/src/index.ts

@@ -2,3 +2,4 @@ export * from './messages.js'
 export * from './trader/useAllProviderTradeContext.js'
 export * from './SiteAdaptor/trader/Trader.js'
 export * from './locales/languages.js'
+export * from './config.js'

packages/shared/src/constants.tsx

@@ -1,7 +1,6 @@
 import type { ReactNode } from 'react'
 import { Icons, type GeneratedIcon } from '@masknet/icons'
-import { EnhanceableSite, NetworkPluginID } from '@masknet/shared-base'
-import { ChainId } from '@masknet/web3-shared-evm'
+import { EnhanceableSite } from '@masknet/shared-base'
 
 export const SOCIAL_MEDIA_ICON_MAPPING: Record<EnhanceableSite | string, ReactNode> = {
     [EnhanceableSite.Twitter]: <Icons.TwitterX />,
@@ -41,22 +40,3 @@ export enum PopupHomeTabType {
     SocialAccounts = 'Social Accounts',
     ConnectedWallets = 'Connected Wallets',
 }
-
-export const TRADER_WEB3_CONFIG = {
-    [NetworkPluginID.PLUGIN_EVM]: {
-        supportedChainIds: [
-            ChainId.Mainnet,
-            ChainId.BSC,
-            ChainId.Matic,
-            ChainId.Arbitrum,
-            ChainId.xDai,
-            ChainId.Aurora,
-            ChainId.Avalanche,
-            ChainId.Fantom,
-            ChainId.Astar,
-            ChainId.Optimism,
-        ],
-    },
-    [NetworkPluginID.PLUGIN_FLOW]: { supportedChainIds: [] },
-    [NetworkPluginID.PLUGIN_SOLANA]: { supportedChainIds: [] },
-}