fix: mf-5355 chain id form swap page (#10812)

DimensionDev · Sep 21, 2023 · 2d56f04 · 2d56f04
1 parent 833d8d9
commit 2d56f04
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 7 deletions.
diff --git a/packages/mask/src/extension/popups/pages/Swap/index.tsx b/packages/mask/src/extension/popups/pages/Swap/index.tsx
@@ -1,17 +1,17 @@
-import { useEffect, useMemo } from 'react'
+import { SiteAdaptorContextRef } from '@masknet/plugin-infra/dom'
 import { AllProviderTradeContext } from '@masknet/plugin-trader'
 import { Appearance } from '@masknet/public-api'
-import { SharedContextProvider } from '@masknet/shared'
+import { SharedContextProvider, SwapPageModals } from '@masknet/shared'
+import { openWindow } from '@masknet/shared-base-ui'
 import { applyMaskColorVars, makeStyles } from '@masknet/theme'
 import { ChainContextProvider, DefaultWeb3ContextProvider } from '@masknet/web3-hooks-base'
 import { Typography } from '@mui/material'
+import { useEffect, useMemo } from 'react'
+import { TwitterAdaptor } from '../../../../../shared/site-adaptors/implementations/twitter.com.js'
 import { useI18N } from '../../../../utils/index.js'
 import { NetworkSelector } from '../../components/NetworkSelector/index.js'
 import { useTokenParams } from '../../hooks/index.js'
 import { SwapBox } from './SwapBox/index.js'
-import { SiteAdaptorContextRef } from '@masknet/plugin-infra/dom'
-import { TwitterAdaptor } from '../../../../../shared/site-adaptors/implementations/twitter.com.js'
-import { openWindow } from '@masknet/shared-base-ui'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -116,6 +116,7 @@ export default function SwapPage() {
                     </div>
                 </div>
             </ChainContextProvider>
+            <SwapPageModals />
         </SharedContextProvider>
     )
 }
diff --git a/packages/shared-base-ui/src/hooks/usePersistSubscription.ts b/packages/shared-base-ui/src/hooks/usePersistSubscription.ts
@@ -20,6 +20,7 @@ export function usePersistSubscription<T>(
         },
     })
     useEffect(() => {
+        refetch() // Actively fetch, make persist data act as placeholder data
         return subscription.subscribe(refetch)
     }, [subscription, refetch])
 

diff --git a/packages/shared/src/UI/components/WalletConnectedBoundary/index.tsx b/packages/shared/src/UI/components/WalletConnectedBoundary/index.tsx
@@ -12,7 +12,7 @@ import type { Web3Helper } from '@masknet/web3-helpers'
 import { useAsync } from 'react-use'
 import { SmartPayBundler } from '@masknet/web3-providers'
 import { NetworkPluginID } from '@masknet/shared-base'
-import { SelectProviderModal, WalletRiskWarningModal } from '../../../index.js'
+import { SelectProviderModal, WalletRiskWarningModal } from '../../modals/modals.js'
 
 const useStyles = makeStyles()({
     button: {

diff --git a/packages/shared/src/UI/modals/WalletRiskWarningModal/index.tsx b/packages/shared/src/UI/modals/WalletRiskWarningModal/index.tsx
@@ -13,7 +13,7 @@ export interface WalletRiskWarningModalProps {}
 export const WalletRiskWarningModal = forwardRef<
     SingletonModalRefCreator<WalletRiskWarningModalOpenProps>,
     WalletRiskWarningModalProps
->((props, ref) => {
+>(function WalletRiskWarningModal(props, ref) {
     const [account, setAccount] = useState('')
     const [pluginID, setPluginID] = useState(NetworkPluginID.PLUGIN_EVM)
 

diff --git a/packages/shared/src/UI/modals/index.tsx b/packages/shared/src/UI/modals/index.tsx
@@ -19,6 +19,7 @@ import { AddCollectiblesModal } from './AddCollectiblesModal/index.js'
 import { PersonaSelectPanelModal } from './PersonaSelectPanelModal/index.js'
 import { ShareSelectNetworkModal } from './ShareSelectNetwork/index.js'
 
+import { noop } from 'lodash-es'
 import * as modals from './modals.js'
 export * from './modals.js'
 
@@ -49,3 +50,14 @@ export const Modals = memo(function Modals(props: ModalProps) {
         </RootWeb3ContextProvider>
     )
 })
+
+export const SwapPageModals = memo(function SwapPageModals() {
+    return (
+        <>
+            <SelectProviderModal createWallet={noop} ref={modals.SelectProviderModal.register} />
+            <WalletRiskWarningModal ref={modals.WalletRiskWarningModal.register} />
+            <SelectFungibleTokenModal ref={modals.SelectFungibleTokenModal.register} />
+            <SelectGasSettingsModal ref={modals.SelectGasSettingsModal.register} />
+        </>
+    )
+})